js实现图片拖拽效果

码子w

已于 2022-09-27 13:22:22 修改

阅读量503

点赞数

分类专栏： JavaScript 文章标签： javascript jquery html5 css

于 2022-09-27 13:16:44 首次发布

码王

本文链接：https://blog.csdn.net/qq_53732168/article/details/127069590

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

没拖拽之前

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 375px;
        border: 1px solid;
        margin: 0 auto;
        min-height: 500px;
        border-radius: 10px;
        padding: 20px;
        background-color: #28263b;
        color: #fff;
        position: relative;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: flex-start;
      }
      .box img {
        width: 45px;
        height: 45px;
        padding: 10px 20px;
      }
      .fix {
        padding: 0 20px;
        width: 45px;
        height: 0;
      }
      .my {
        min-height: 150px;
        position: relative;
      }

      .pop {
        width: 150px;
        height: 30px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        line-height: 30px;
        padding: 10px 20px;
        border-radius: 5px;
        display: none;
        color: #000;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <p>最近使用的小程序</p>
      <div class="box last">
        <img
          draggable="true"
          src="./imgs/下箭头.png"
          alt=""
        />
        <img
          draggable="true"
          src="./imgs/错误.png"
          alt=""
        />
        <img
          draggable="true"
          src="./imgs/修改.png"
          alt=""
        />
   
        <span class="fix"></span>
        <span class="fix"></span>
        <span class="fix"></span>
      </div>

      <p>我的小程序</p>
      <div class="box my">
        <span class="fix"></span>
        <span class="fix"></span>
        <span class="fix"></span>
        <div class="pop">松手把图标放在这里</div>
      </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js "></script>
    <script>
      // 已经拖动的元素下标
      var finishList = [];
      // 当前拖动的下标
      var currIndex;

      // 开始拖动
      $(".last>img").on("dragstart", function (event) {
        currIndex = $(this).index() + 1;
        console.log(currIndex)
      });

      // 放下元素
      $(".my").on("drop", function (event) {
        // 判断是否已经放进去了
        if (!finishList.includes(currIndex)) {
          finishList.push(currIndex);
          var $clone = $(`.last img:nth-child(${currIndex})`).clone();
          $(this).prepend($clone);
          console.log(finishList)
        }
      });
 
      // 进入元素范围, 阻止默认事件(必须)
      $(".my").on("dragover", function (event) {
        event.preventDefault();
      });

      // 进入元素
      $(".my").on("dragenter", function (event) {
        if (finishList.includes(currIndex)) {
          $(".pop").text("目标已存在");
        } else {
          $(".pop").text("松手把图标放在这里");
        }
        $(".my").css("background", "rgba(0,0,0,.5)");
        $(".pop").css("display", "block");
      });

      // 拖动结束
      $(document).on("dragend", function () {
        $(".my").css("background", "");
        $(".pop").css("display", "none");
      });
    </script>
  </body>
</html>

拖拽之后