html 里的拖放相关事件

拖放
首先给要拖放的元素添加draggable属性
<div draggable="true">

拖拽的生命周期
1.拖拽开始的时候
2.拖拽进行中
3.拖拽结束

1、拖拽开始的时候事件
a、在开始移动的时候触发
elem.ondragstart = function(){}

b、在一定中触发
elem.ondrag = function(){}

c、在结束的时候触发
elem.ondragend = function(){}

2、目标元素的事件

当拖拽元素进入目标元素时触发(只有鼠标进入的时候才触发)
elem.ondragenter = function(){}

在目标元素中移动(取消冒泡事件一般写在这个事件里)
elem.ondragover = function(){

e.dataTransfer.effectAllowed = "copyMove";
//阻止直接触发拖拽事件的结束
e.preventDefault();
}

在离开目标元素时候触发
elem.ondrop = function(){}

 

转载于:https://www.cnblogs.com/Godfather-twq/p/11552261.html