html5的拖拽事件

原生拖放

一、若要一个元素可以被拖放，首先要为元素添加draggable属性

true	可以被拖放
false	不可以被拖放
auto	除img或url以外都可以被拖放
其他值	都不可以被拖放

 

注释：在火狐中设置draggable属性无用，但可以再dragstart事件中为dataTransfer对象中添加setData()方法后就可以允许被拖拽。支持draggable的属性的浏览器有IE10+、Firefox 4+、Safari 5+，chrome,Opera 11.5+.

二、拖拽发生过程

     被拖拽元素

dragstart	按下鼠标键并开始移动鼠标时
drag	在dragstart事件之后，在元素被拖动期间会持续触发该事件
dragend	当拖动停止时，会触发dragend事件

   

 

 

 

 放置目标元素

dragenter	有元素被拖动到放置目标上
dragover	紧随dragenter发生，在被拖动的元素 还在放置目标范围内移动时，会持续触发该事件
dragleave	在元素被拖出放置目标时触发
drop	元素被放到了放置目标中触发

 

 

 

 

 

 

注释：拖拽发生过程：dragstart->drag->dragenter->dragover->dragleave/drop->dragend

三、自定义放置目标

    原因：所有元素默认是不允许放置的，尽管都支持放置目标事件，当拖放元素经过不允许放置的元素时，就会看到一种特殊光标（圆环中有一条反斜线）。

    解决方法：把任何元素都变成有效的放置目标，重写dragenter和dragover事件的默认行为.如

function prevent(e){
   var e = e || window.event;
   e.preventDefault(e);
}

droptarget.dragover = prevent;
droptarget.dragenter = prevent;

此时特殊光标会变成允许放置的光标。

注释：firfox 3.5+中，放置事件的默认行为是打开被放到放置目标上的url，为支持FireFox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL.

四、dataTransfer对象

     IE5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。

setData()	保存值，第一个参数可以是“text/plain"和"text/uri-list"
getData()	获取在setData（）中保存的值。
dropEffect	属性，知道被拖动的元素能够执行哪种放置行为。搭配effectAllowed属性才有用
effectAllowed	属性，表示允许拖动元素的哪种dropEffect.

 

 

 

注意：dataTransfer对象中的数据只能在drop事件处理程序中读取。如果ondrop处理程序中没有读到数据，那就是dataTransfer对象已经被销毁，数据也丢失了。

dropEffect的值	含义
none	不能把拖动的元素放在这里
move	应该把拖动的元素移动到放置目标
copy	应该把拖动的元素复制到放置目标
link	表示放置目标会打开拖动的元素（但拖动的元素必须是一个连接，有URL）

 

 

 

 

 

effectAllowed值	含义
uninitialized	没有给被拖动的元素设置任何放置行为
none	被拖动的元素不能有任何行为
copy	只允许值为'copy'的dropEffect
link	只允许值为'link'的dropEffect
move	只允许值为'move'的dropEffect
copyLink	只允许值为'copy'和“link”的dropEffect
copyMove	只允许值为'copy'和“move”的dropEffect
linkMove	只允许值为'move'和“link”的dropEffect
all	允许任意的dropEffect

转载于:https://www.cnblogs.com/AliceX-J/p/5269346.html