HTML5拖放功能
基本概念
在HTML5中,任何元素都可以拖放,Drap和Drop。拖放属于HTML事件中的Mouse事件。
实例讲解
代码地址:
... <body> <div id="end-area" class="area"></div> <img id="start-area" draggable="true" src="http://pic1.zhimg.com/d80d9ff11c28c19123bc75a27d3c1df8_l.jpg"> <script id="jsbin-javascript"> var img = document.getElementById("start-area"); img.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); }; var div = document.getElementById("end-area"); div.ondragover = function(event) { event.preventDefault(); }; div.ondrop = function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }; </script> </body> ...
?
大体模样:
实现过程
1.设置元素可拖放。(HTML部分)
<img draggable="true">
?
注意:链接和图像都是默认可拖动。因此上述代码可以不用添加draggable属性,但为了可读性还是加上吧。
2.拖放过程需要怎么处理?(JS部分)
需要在被拖元素上绑定事件:ondragstart事件。
基于HTML和JavaScript分离的原则,代码为:
img.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); };
?
这代码里面最关键的是dataTransfer对象。它是事件对象(event)的一个属性,所以只能在拖放事件处理程序中访问dataTransfer对象,用来完善拖放功能。
dataTransfer对象有两个方法:getData()和setData()。两个方法之间的关系是:setData()方法的第一个参数,也是getData()方法唯一的一个参数,是一个字符串,表示保存的数据类型,取值为"text"或"URL。
3.拖放到哪个位置?(JS部分)
目标元素绑定事件:ondragover事件。
div.ondragover = function(event) { event.preventDefault(); };
?
默认地,无法将数据/元素放置到其他元素中。所以通过event.preventDefault()
来阻止对元素的默认处理方式。
4.放置。(JS部分)
目标元素绑定事件:ondrop事件。
div.ondrop = function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); };
?
放置实际上是移动的过程,用appendChild()方法。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。