H5API 拖拽

最新推荐文章于 2024-04-19 09:42:12 发布

VIP文章野生小农

最新推荐文章于 2024-04-19 09:42:12 发布

阅读量467

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64749865/article/details/126839511

版权

2.拖拽

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

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(ev