HTML5拖拽API
2018-01-22 14:35
302 查看
今天上了w3cSchool,去看了一下HTML5的拖放API,以前我不想用那个dataTransfer(我称它为拖拉机函数),但是我觉得,要用HTML5的拖放,这个是必不可少的,要不然,要是用全局变量的话,会造成全局污染。下面我先说一下与拖拽相关的函数
1.DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
2.draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
3.ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
4.ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
5.ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
6.ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
7.ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
8.Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
9.Event.effectAllowed 属性:就是拖拽的效果。
普及了上述知识后,我就把w3cSchool的例子写了一下
最后的结果是:
初始状态:
拖动中的状态:
拖动完毕状态:
1.DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
2.draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
<div title="拖拽我" draggable="true">列表1</div>
3.ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
4.ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
5.ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
6.ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
7.ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
8.Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
9.Event.effectAllowed 属性:就是拖拽的效果。
普及了上述知识后,我就把w3cSchool的例子写了一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5拖拽</title> <style type="text/css"> img{ width: 100px; } div{ width: 200px; height: 150px; border:1px solid #ccc; float: left; margin-right: 30px; } </style> </head> <body> <div ondragover = 'allowDrop(event)' ondrop = 'drop(event)'> <img src="img/timg.jpg" draggable = 'true' id = 'img' ondragstart = 'drag(event)'> </div> <div id = 'd1' ondragover = 'allowDrop(event)' ondrop = 'drop(event)'></div> <script type="text/javascript"> //dragover的默认阻止函数 function allowDrop(ev){ ev.preventDefault(); } //被拖动元素加上的dragstart函数 function drag(ev){ //拖拉机函数载入数据 ev.dataTransfer.setData('id',ev.target.id); } //被放置容器加上的ondrop事件 function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData('id'); ev.target.appendChild(document.getElementById(data)); } //此函数的作用是用于火狐,阻止拖放图片的时候总是以新标签打开 document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); } </script> </body> </html>
最后的结果是:
初始状态:
拖动中的状态:
拖动完毕状态:
相关文章推荐
- js原生拖拽事件(HTML5的拖放 API)
- HTML5拖拽API
- html5之拖拽API
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- HTML5元素拖拽drag与拖放drop相关API
- 人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- HTML5--拖拽API(含超经典例子)
- HTML5中新增的文件API和拖拽API详解
- HTML5之拖拽API
- Drag/Drop---突袭HTML5之Javascript API扩展4 - 拖拽
- js利用HTML5的拖拽API做拖拽的流程图
- 拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
- html5拖拽API及拖拽示例演示
- 关于文件流的模拟上传——人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) | 彬Go
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- HTML5元素拖拽drag与拖放drop相关API
- HTML5 拖拽API 学习笔记
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)