HTML5拖拽上传
本片基于Chrome浏览器
设置可拖拽
Chrome浏览器中使用draggable=true来实现拖拽
<div id="div1" draggable="true">拖拽当前元素</div>
一、拖拽事件
拖拽事件目标分两类:被拖拽元素和目标元素
1.被拖拽元素
拖拽事件触发的顺序如下:
- ondragstart : 拖拽的一瞬间触发
- ondrag : 拖拽期间连续触发
- ondragend : 拖拽结束触发
2.目标元素
目标元素事件触发的顺序如下:
- ondragenter : 进入目标元素触发
- ondragover : 在目标元素内部持续触发
- ondragleave/ondrop(两者触发其一) : 离开目标元素触发,在目标元素上释放鼠标触发
注意:默认状态下,一个元素不能放另一元素的上面,需要在ondragover事件里面阻止默认事件
demo:网址——————————————————
遇到问题:为何ondrop事件无法触发?
答:有些元素默认不允许放置,无法触发ondrop事件,需要重写dragenter和dragover的默认行为。
二、dataTransfer对象(数据转换)
dataTransfer是事件对象的一个属性,用于从被拖动元素向目标元素传递字符串形式的数据
主要方法有setData,getdata两个方法设置数据和接受数据。
setData 接受两个参数,第一个参数是字符串,表示保存的数据类型,第二个参数是数据内容。
getData 接受一个参数,与setData的第一个参数一样。
支持MIME类型的(IE10一下不支持)
保存在dataTransfer对象中的数据智能在drop事件处理程序中读取。
e.dataTransfer.setData("text","文本");
var text = e.dataTransfer.getData("text");
e.dataTransfer.setData("URL","http://www.baidu.com/");
var url = e.dataTransfer.getData("URL");
自定义放置目标
有的时候我们拖动的元素放置在无效的目标上的时候是不会产生任何效果的,因为这些元素默认是不允许放置的,如果拖动元素经过不允许放置的元素是不会触发drop事件的。
可以将任何元素变成有效的放置目标的方法:重写dragenter和,dragover的默认行为。
div2.addEventListener("dragenter", function (e) {
e.preventDefault();
});
div2.addEventListener("dragover", function (e) {
e.preventDefault();
});
属性
DataTransfer.dropEffect
获取当前所选拖放操作的类型,或将拖拽操作设置为新类型。值必须为none,copy,link或move中的一个。
不同的dropEffect属性值,鼠标的手形就会有不一样的表现
dropEffect属性的设置主要用在dragenter和dragover事件中,同时受effectAllowed属性影响。
DataTransfer.effectAllowed
提供可能的所有类型的操作。必须是none,copy,copyLink,copyMove,link,linkMove,move,all或uninitialized中的一个。
demo:
github