html5的拖拽事件代码解析

阅读() @2018-07-15 14:13:32

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

dragable="true"
允许拖放
dragable="false"
禁止拖放
dragable="auto"
除img或url之外都可以被拖放
其他选项 都不允许拖放

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

二、拖放过程解析:

1、被拖放元素

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

2、放置目标元素:

ondragenter 有元素被拖动到放置目标上
ondragover

紧随dragenter发生,在被拖动的元素,还在放置目标范围内移动时,会持续触发该事件

ondragleave 在元素被拖出放置目标时触发
ondrop 元素被放到了放置目标中触发

注意:拖拽发生过程:dragstart->drag->dragenter->dragover->dragleave/drop->dragend。

三、自定义放置目标:

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

解决方法:阻止javascript默认事件:

oBox.ondragover = function(ev){
     var ev = ev || window.event;
     ev.preventDefault();
}

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

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

阻止默认事件有两种写法:

ev.preventDefault();//兼容除火狐之外的其他浏览器
ev.stopPropagation();//兼容火狐

四、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

 

微信二维码