拖放相关事件

一、拖放事件

1.任何元素都有一个draggable属性，draggable=true就能拖动，拖动元素时依次触发下列事件：

   (1)dragstart：按下鼠标并移动时，在被拖动元素上触发；

   (2)drag：在元素被拖动时持续触发；

   (3)dragend：拖动停止时触发；

2.当元素被拖动到一个有效的放置目标时，依次触发下列事件：

   (1)dragenter：元素被拖动到放置目标上触发；

   (2)dragover：被拖动元素在放置目标范围内移动时触发；

   (3)drop：元素被放到放置目标中触发；

二、自定义放置目标

当把元素拖动到无效的放置目标时，不会触发drop事件。我们可以把任何元素变成有效的放置目标：

div.οndragenter=function(event){if (event.preventDefault){event.preventDefault();}else{event.returnValue=false;} }div.ondragover=function(event){if (event.preventDefault){event.preventDefault();}else{event.returnValue=false;} }//取消元素默认放置行为 div.οndrοp=function(event){if (event.preventDefault){event.preventDefault();}else{event.returnValue=false;} }

三、dataTransfer对象

dataTransfer对象是事件对象的属性，有两个主要方法：setData()、getData(),用法如下：

event.dataTransfer.setData("Text",event.target.id); var data=event.dataTransfer.getData("Text");

 

转载于:https://www.cnblogs.com/lodadssd/p/6250497.html

总结

以上是生活随笔为你收集整理的拖放相关事件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。