HTML5 DragEvent学习+制作一个可以拖动的DIV

2024年5月24日 183次阅读 来源: 苍穹青空

HTML5 拖放

一、为了使元素可拖动，把 draggable 属性设置为 true

<div draggable="true"></div>

二、添加事件监听

DragEvent

HTML5拖放有如下事件

drag事件：拖拉过程中，在被拖拉的节点上持续触发。

dragstart事件：拖拉开始时在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。

dragend事件：拖拉结束时（释放鼠标键或按下escape键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragStart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。

dragenter事件：拖拉进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。

dragover事件：拖拉到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拉事件的效果（DataTransfer对象的dropEffect属性）为none，即不允许放下被拖拉的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拉效果为none。

dragleave事件：拖拉离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拉离开当前节点，就在这个事件的监听函数中设置。

drop事件：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

点击这个链接查看HTML5各个拖放事件

总结

当一个节点被拖拉到另一个节点里，触发的事件如下:

dragstart –> drag –> dragenter –> dragover –> drop –> dragend

  1. dragstart， drag， dragend 在被拖动的节点触发，触发的event.target为被拖拽的节点
  2. dragenter dragover dragleave drop 在目标节点触发，触发的event.target为释放的目标节点
  3. 在 dragover触发时需要执行event.preventDefault()，允许被拖动的节点进入。

在firefox浏览器上需要注意的东西

1、在firefox上 drag、dragend 事件不能够获取鼠标位置
2、需要在dragstart 触发时保存数据，不然不能拖动。
3、dataTransfer.setData()函数中 key 为‘Text’ 时会打开一个新的标签页

let drag = document.getElementById('drag');
    drag.addEventListener('dragstart', (event) => {
        console.log('dragstart')
        // 兼容 firefox ， setData()函数中 key 为‘Text’ 时会打开一个新的标签页
        // event.dataTransfer.setData("Text",'www.baidu.com');
        event.dataTransfer.setData("any",'www.baidu.com');
    })

学习了各个事件后做了一个可以拖动的Div的demo，点击查看

    原文作者：苍穹青空
    原文地址: https://segmentfault.com/a/1190000011208632
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞