html5拖拽

最新推荐文章于 2024-06-06 15:07:55 发布

Waghhhh

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量1.4k

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Waghhhh/article/details/120288318

版权

1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
dragstart->drag->dragenter->dragover->drop->dragend
-----------------------------------------------------------------------
2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

例子

<body>
    <div class="parent"></div>
    <div class="child" draggable="true" id="one">1</div>
    <div class="child" draggable="true" id="two">2</div>
    <div class="child" draggable="true" id="three">3</div>
    <div class="child" draggable="true" id="four">4</div>
</body>

window.onload = function () {
      var childs = document.querySelectorAll('.child');
      var parent = document.querySelector('.parent');
      // console.log(childs);
      childs = Array.from(childs);
      childs.forEach((item, index) => {
        // 开始拖放
        item.ondragstart = function (event) {
          console.log('ondragstart');
          // console.log(event);
          event.dataTransfer.setData('id', item.id);
        }
        // 正在拖放
        item.ondrag = function () {
          console.log('ondrag');
        }
        // 拖放结束
        item.ondragend = function () {
          console.log('ondragend');
        }
        // console.log(item, index);
      });
      // parent放置事件
      // 进入目标元素
      parent.ondragenter = function () {
        console.log('ondragenter');
      }
      // 在目标元素内活动
      parent.ondragover = function (event) {
        console.log('ondragover');
        // 设置目标元素可放置
        event.preventDefault();
      }
      // 将拖放元素放置到目标元素内
      parent.ondrop = function (event) {
        console.log('ondrop');
        // 获取数据传输对象内的数据，通过数据获取节点，放置节点
        var id = event.dataTransfer.getData('id');
        //id="one"
        var dom = document.querySelector("#" + id);
        this.appendChild(dom);
        // 阻止冒泡
        event.stopPropagation();
      }

      document.body.ondragover = function (event) {
        event.preventDefault();
      }

      document.body.ondrop = function (event) {
        console.log('ondrop');
        // 获取数据传输对象内的数据，通过数据获取节点，放置节点
        var id = event.dataTransfer.getData('id');
        //id="one"
        var dom = document.querySelector("#" + id);
        this.appendChild(dom);
        event.stopPropagation();
      }

效果图：

Waghhhh

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5拖拽

1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。拖动事件：dragstart、drag、dragend放置事件：dragenter、dragover、drop拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend---------------------------------------
复制链接

扫一扫