HTML5DragEvent学习+制作可拖拽的DIV

2.添加事件监听DragEventHTML5Drag而drop有如下事件drag事件：在拖动过程中，在被拖动节点上不断触发。dragstart事件：拖动开始时在被拖动节点上触发，该事件的target属性为被拖动节点。通常，要拖拽的数据应该在这个事件的监听函数中指定。dragend事件：拖动结束时（松开鼠标键或按下退出键）在被拖动节点上触发，事件的目标属性为被拖动节点。它在与dragStart事件相同的节点上触发。不管拖动是跨窗口还是中途取消，都会触发dragend事件。dragenter事件：拖动进入当前节点时，在当前节点上触发，事件的target属性为当前节点。通常，在该事件的监听函数中，指定是否允许拖动的数据落在当前节点上。如果当前节点没有事件的监听函数，或者监听函数不执行任何操作，则表示不允许在当前节点上丢弃数据。可视化显示拖拽到当前节点，也是在这个事件的监听函数中设置的。dragover事件：当拖动到当前节点上时，会在当前节点上持续触发，该事件的target属性为当前节点。该事件与dragenter事件基本相似。默认情况下，当前拖动事件的效果（DataTransfer对象的dropEffect属性）会被重置为none，即被拖动的节点不允许被放下，所以如果允许数据在当前节点放下，preventDefault是通常使用的方法，取消重置拖动效果为无。dragleave事件：拖动离开当前节点范围时在当前节点上触发，事件的target属性为当前节点。可视化显示拖离当前节点，在本次事件的监听函数中设置即可。drop事件：当拖动的节点或选中的文本被释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上松开鼠标按钮，也不会触发该事件。如果用户按Escape键取消操作，则不会触发该事件。该事件的监听函数负责取出拖拽的数据并进行相关处理。单击此链接可查看HTML5拖放事件的摘要。当一个节点被拖动到另一个节点时，触发的事件如下：dragstart-->drag-->dragenter-->dragover-->drop-->dragenddragstart,drag,dragend在被拖动的节点上被触发，并且触发事件。目标是被拖动的节点。dragenterdragoverdragleavedrop在目标节点上触发，触发的事件。target为释放的目标节点。Event.preventDefault()需要在dragover被触发的时候执行，让被拖动的节点进入。firefox浏览器上需要注意的地方1.firefox上的drag和dragend事件不能获取鼠标位置2.触发dragstart时需要保存数据，否则无法拖动。3.当dataTransfer.setData()函数中的key为'Text'时，会打开一个新的tabletdrag=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演示，点击查看