js原生拖拽的2种实现

（1）实现在规定区域内跟随鼠标移动（鼠标事件实现）

原理图.png

示例代码效果.png

（2）拖放效果（drag事件实现）

- drag，拖动过程中持续触发，在被拖拉的节点上持续触发
- dragstart， 用户开始拖动元素时触发，在被拖拉的节点上触发。
- dragend，在拖放操作结束时触发（释放鼠标键或按下 ESC 键），在被拖拉的节点上触发。
- dragenter，拖拉进入当前节点时，在当前节点上触发一次。
- dragover， 拖拉到当前节点上方时，在当前节点上持续触发。
- dragleave， 拖拉操作离开当前节点范围时，在当前节点上触发。
- drop ，事件在元素或选中的文本，被放置在有效的放置目标上时被触发。

• dragenter和dragover事件的监听函数，用来取出拖拉的数据（即允许放下被拖拉的元素）。由于网页的大部分区域不适合作为放下拖拉元素的目标节点，所以这两个事件的默认设置为当前节点不允许接受被拖拉的元素。如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。

上面代码中，如果不取消拖拉事件或者阻止默认行为，就不能在div节点上放下被拖拉的节点。

// 使用拖放来选择文件