H5元素draggable实现拖拽操作

未及545

于 2023-03-22 23:21:27 发布

阅读量313

点赞数 1

文章标签：编辑器

本文链接：https://blog.csdn.net/qq_72760247/article/details/129721543

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #draggable {
      width: 200px;
      height: 30px;
      text-align: center;
      background: white;
    }

    .container {
      width: 500px;
      height: 600px;
      background-color: aqua;
      margin-left: 500px;
    }

    .dropzone,
    .dropzone1 {
      width: 200px;
      height: 30px;
      background: blueviolet;
      margin-bottom: 15px;
      /* padding: 10px; */
    }

    .box {
      position: relative;
      width: 230px;
      height: 600px;
      background-color: greenyellow;
      top: -180px;
      margin-left: 298px;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 左侧 -->
    <div class="dropzone">
      <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable
      </div>
    </div>
    <div class="dropzone">
      <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable1
      </div>
    </div>
    <div class="dropzone">
      <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable2
      </div>
    </div>
    <div class="dropzone">
      <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable3
      </div>
    </div>

    <!-- 右侧 -->
    <div class="box">
      <div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">

      </div>
      <div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">

      </div>
      <div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">

      </div>
      <div class="dropzone1" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">

      </div>
    </div>


  </div>

  <script type="text/javascript">
    var dragged;

    document.addEventListener("drag", function (event) {

    }, false);

    document.addEventListener("dragstart", function (event) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      // event.target.style.opacity = .5;
    }, false);

    document.addEventListener("dragend", function (event) {
      // reset the transparency
      // event.target.style.opacity = "";
    }, false);

    /* events fired on the drop targets */
    document.addEventListener("dragover", function (event) {
      // prevent default to allow drop
      event.preventDefault();
    }, false);

    document.addEventListener("dragenter", function (event) {
      // highlight potential drop target when the draggable element enters it
      // if (event.target.className == "dropzone") {
      //   event.target.style.background = "red";
      // }
      // if (event.target.className == "dropzone1") {
      //   event.target.style.background = "red";
      // }

    }, false);

    document.addEventListener("dragleave", function (event) {
      // reset background of potential drop target when the draggable element leaves it
      // 

    }, false);

    document.addEventListener("drop", function (event) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if (event.target.className == "dropzone1") {
        event.target.style.background = "";
        dragged.parentNode.removeChild(dragged);
        event.target.appendChild(dragged);
      }
      if (event.target.className == "dropzone") {
        event.target.style.background = "";
        dragged.parentNode.removeChild(dragged);
        event.target.appendChild(dragged);
      }
    }, false);
  </script>
</body>

</html>

效果图：

左右可以相互拖拽白色盒子以及内容，左右单独也可在蓝色区域调整顺序，每个蓝色盒子对应一个白色内容，直至右边拖满即可。白色盒子存在的地方不可在接收其他白色盒子。