HTML5新增的拖放API---(一)
2015-03-21 22:36
330 查看
HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面。
拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有松开鼠标),此时开始拖动;在拖动的过程中,只要没有松开鼠标,将会不断产生事件-----这个过程称为“拖”。把被拖动的元素拖动到另外一个元素上并松开鼠标-----这个过程被称为“放”。
一、启动拖放
在HTML5中,<img .../>元素默认就是可拖动的;而<a .../>元素只要设置了href属性,它默认也是 可拖动的。
对于普通的元素,如果想要让它变成可拖动的只要将该元素的draggable属性设置为true即可。但仅仅设置该元素的draggable属性还不够,因为仅仅设置了draggable='true'只是表示该元素可拖动,但拖动时并未携带数据,因此用户看不到拖动的效果。
为了 让拖动操作能携带数据,应该为被拖动的元素指定ondragstart事件指定监听器,在该监听器中让拖动操作可以携带数据。
二、接受“放”
拖动时显示禁止图标,这表拖动到的“目的地”并不接受拖动的元素-----这是因为当拖动元素经过document时,document对象默认阻止了拖动事件,而其他HTML组件也位于document对象内,因此它们也不能接受“放”。
为了让document可以接受“放”,应该为documen的ondragover事件指定监听器,在监听器中取消document对拖动事件的默认行为。
document.ondragover=function(){
//取消事件的默认行为
return false;
}
当用户把div元素拖到指定位置释放后,Firefox浏览器默认会打开一个新页面,页面的URL正是拖放操作携带的数据。如果使用Chrome浏览器来浏览该页面,当用户把div元素拖放到指定位置释放后,Chrome浏览器并没有执行任何默认动作。
由此可见,不同浏览器对于拖放操作的默认动作并不相同,如果开发者取消拖放操作的默认动作,则可以为document的ondrop事件绑定监听器。
document.ondrop=function(e){
e.stopPropagation();
e.preventDefault();
//取消默认行为
return false;
}
实例:
View Code
三、DataTransfer对象
拖放触发的拖放事件有一个dataTransfer属性,该属性是一个DataTransfer对象,该对象包含如下属性和方法
dataTransfer.dropEffect:设置或返回拖放目标上允许拖放的行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性只允许为"none"、“copy”、“link”和“move”四个值之一。
dataTransfer.effectAllowed:设置会返回被拖动元素允许发生的拖动行为。该属性值可设置为“none”、“copy”、“copyLInk”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
dataTransfer.items:该属性返回DataTransferItems对象,该对象代表了拖动数据。
dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向的距离;y设置图标与鼠标在垂直方向的距离
dataTransfer.addElement(element):添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(format):获取DataTransfer对象中format格式的数据。
dataTransfer.setData(format,data):向DataTransfer对象中设置format格式的数据。其中format代表数据格式,data代表数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据。如果省略format格式,则意味着清除DataTransfer对象中的全部数据。
dataTransfer.files:获取外部拖拽文件的一个类似数组的集合(length)。集合中每个元素有type属性,依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。
通过DataTransfer对象,可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时(ondragstart)事件将拖放源的数据存入DataTransfer对象中,然后在拖放结束从DataTransfer对象中读取数据,这样就可以完成更复杂的错放操作了。
实例:
四、拖放行为
五、改变拖放图标
拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有松开鼠标),此时开始拖动;在拖动的过程中,只要没有松开鼠标,将会不断产生事件-----这个过程称为“拖”。把被拖动的元素拖动到另外一个元素上并松开鼠标-----这个过程被称为“放”。
一、启动拖放
在HTML5中,<img .../>元素默认就是可拖动的;而<a .../>元素只要设置了href属性,它默认也是 可拖动的。
对于普通的元素,如果想要让它变成可拖动的只要将该元素的draggable属性设置为true即可。但仅仅设置该元素的draggable属性还不够,因为仅仅设置了draggable='true'只是表示该元素可拖动,但拖动时并未携带数据,因此用户看不到拖动的效果。
为了 让拖动操作能携带数据,应该为被拖动的元素指定ondragstart事件指定监听器,在该监听器中让拖动操作可以携带数据。
<div style="width:150px;height:150px;background:rgba(195, 86, 246, 0.31);border:1px solid gray;" id="div1" draggable="true"> 可拖动div </div> <script type="text/javascript"> //绑定拖动事件 var div1 = document.getElementById('div1'); div1.ondragstart = function (e) { //让拖动操作携带数据 e.dataTransfer.setData('text/plain','www.baidu.com'); } </script>
二、接受“放”
拖动时显示禁止图标,这表拖动到的“目的地”并不接受拖动的元素-----这是因为当拖动元素经过document时,document对象默认阻止了拖动事件,而其他HTML组件也位于document对象内,因此它们也不能接受“放”。
为了让document可以接受“放”,应该为documen的ondragover事件指定监听器,在监听器中取消document对拖动事件的默认行为。
document.ondragover=function(){
//取消事件的默认行为
return false;
}
当用户把div元素拖到指定位置释放后,Firefox浏览器默认会打开一个新页面,页面的URL正是拖放操作携带的数据。如果使用Chrome浏览器来浏览该页面,当用户把div元素拖放到指定位置释放后,Chrome浏览器并没有执行任何默认动作。
由此可见,不同浏览器对于拖放操作的默认动作并不相同,如果开发者取消拖放操作的默认动作,则可以为document的ondrop事件绑定监听器。
document.ondrop=function(e){
e.stopPropagation();
e.preventDefault();
//取消默认行为
return false;
}
实例:
<div style="width:150px;height:150px;background:rgba(195, 86, 246, 0.31);border:1px solid gray;" id="div1" draggable="true"> 可拖动div </div> <script typee="text/javascript"> var div1 = document.getElementById('div1'); div1.ondragstart = function (e) { //添加携带数据 e.dataTransfer.setData('text/plain', "www.baidu.com"); } document.ondragover = function () { //取消默认操作 return false; } document.ondrop = function (e) { //固定到指定位置,并显示携带数据 div1.style.position = 'absolute'; div1.style.left = e.pageX + 'px'; div1.style.top = e.pageY + 'px'; div1.innerHTML = e.dataTransfer.getData('text/plain'); //取消默认操作 e.stopPropagation(); e.preventDefault(); } </script>
View Code
三、DataTransfer对象
拖放触发的拖放事件有一个dataTransfer属性,该属性是一个DataTransfer对象,该对象包含如下属性和方法
dataTransfer.dropEffect:设置或返回拖放目标上允许拖放的行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性只允许为"none"、“copy”、“link”和“move”四个值之一。
dataTransfer.effectAllowed:设置会返回被拖动元素允许发生的拖动行为。该属性值可设置为“none”、“copy”、“copyLInk”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
dataTransfer.items:该属性返回DataTransferItems对象,该对象代表了拖动数据。
dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向的距离;y设置图标与鼠标在垂直方向的距离
dataTransfer.addElement(element):添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(format):获取DataTransfer对象中format格式的数据。
dataTransfer.setData(format,data):向DataTransfer对象中设置format格式的数据。其中format代表数据格式,data代表数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据。如果省略format格式,则意味着清除DataTransfer对象中的全部数据。
dataTransfer.files:获取外部拖拽文件的一个类似数组的集合(length)。集合中每个元素有type属性,依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。
通过DataTransfer对象,可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时(ondragstart)事件将拖放源的数据存入DataTransfer对象中,然后在拖放结束从DataTransfer对象中读取数据,这样就可以完成更复杂的错放操作了。
实例:
四、拖放行为
五、改变拖放图标
相关文章推荐
- 搞懂html5新增的拖放API(分析火狐和其它浏览器的不同)
- 用html5新增的js媒体 API手写的一个视频播放器
- HTML5学习笔记简明版(11):新增的API
- HTML5学习笔记简明版(11):新增的API
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
- HTML5 进阶系列:拖放 API 实现拖放排序
- HTML5 进阶系列:拖放 API 实现拖放排序
- html5(四)API存储/定位/拖放/缓存/we b workers /sse
- HTML5脚本扩展---新增小型API
- Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)
- html5---拖放API
- 第90天:HTML5中文件API和拖放操作
- 2.5.0HTML5新增的拖放API
- html5新增拖拽和拖放功能介绍:
- html5新增api(持续更新)
- js原生拖拽事件(HTML5的拖放 API)
- HTML5之新增标签与API
- HTML5拖放API
- HTML5 拖放API