一、浏览器支持情况
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
二、使用方法
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true" />
然后,规定元素被拖动时,会发生什么
让ondragstart属性调用一个函数,并给该函数返回一个拖动对象
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
dataTransfer.setData() 方法设置被拖数据的数据类型和值:(我们将被拖动对象的id传给dataTransfer)
function drag(ev) { <span style="white-space:pre"> </span>ev.dataTransfer.setData("Text",ev.target.id); }
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
当放置被拖数据时,会发生 drop 事件。
在上面,ondrop 属性调用了一个函数,drop(event):
function drop(ev) { <span style="white-space:pre"> </span>ev.preventDefault(); <span style="white-space:pre"> </span>var data=ev.dataTransfer.getData("Text"); <span style="white-space:pre"> </span>ev.target.appendChild(document.getElementById(data)); }
代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
二、实例说明
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> //阻止对元素的默认处理方式 function allowDrop(ev) { ev.preventDefault(); } //将被拖动对象的id传递给dataTransfer中间对象 function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } //取得拖动对象id找到对象实例并用DOM模型添加到<div>里面 function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <!--要被拖动到的地方--> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid red;width:300px;height:200px;"> </div> <!--要被拖动的对象--> <img id="drag1" src="test.png" draggable="true" ondragstart="drag(event)"/> </body> </html>
以上就是 小强的HTML5移动开发之路(16)——神奇的拖放功能的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!