h5拖拽事件

原创已于 2024-10-18 16:31:16 修改

· 135 阅读

0 ·

版权

文章标签：

#javascript #前端 #vue.js

于 2024-10-18 16:30:04 首次发布

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 50vw;
      height: 50vw;
      border:1px solid red;
    }
    .son{
      width: 20vw;
      height: 20vw;
      background-color: black;
      background-clip: content-box;
      cursor: pointer;
      border:1px solid transparent;
    }
  </style>
  <script type="text/javascript">
    document.addEventListener("dragstart", function (event) {
      event.dataTransfer.setData("Text", event.target.id);
    });
    document.addEventListener("dragover", function (event) {
      event.preventDefault();
    });
    document.addEventListener("drop", function (event) {
      if (event.target.id !== 'parent_B') {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
      }
    });
  </script>
</head>
<body>
  长按拖动
  <div style="display: flex;">
    <div class="parent_A parent" id="parent_A"></div>
    <div class="parent_B parent" id="parent_B">这里不能放</div>
  </div>
  <div class="son" draggable="true" id="son"></div>
  <div class="son son1" draggable="true" id="son2"></div>
</body>
</html>

关注博主即可阅读全文