拖动元素时将依次触发下列事件
dragstart
drag
dragend
按下鼠标将触发dragstart,拖动开始时,能通过ondragstart事件来运行脚本代码,触发dragstart事件后,随即会触发drag事件,拖动期间会持续触发该事件。拖动中止会触发dragend事件。
当一个元素被放置在有效位置时,会依次触发下列事件
dragenter:拖动到放置目标上触发
dragover:拖动的元素还在放置目标范围内移动,就会持续触发
dragleave或者drop,元素移出放置目标触发dragleave,假如元素放到了放置目标中则会触发drop
在拖动元素经过某些无效的放置目标时,我们会看见一个禁止的标志,不过你可一把任何元素变成有效的放置目标,方法就是重写dragenter和dragover事件的默认行为。示例如下
var d=document.getElementById("d");
drop.addEventListener("dragover",function(e){
e.preventDefault();
},false)
drop.addEventListener("dragenter",function(e){
e.preventDefault();
},false)