Html5 拖放
浏览器支持
Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例
下面的例子是一个简单的拖放实例:
实例
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault();//allowDrop(ev) var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> </html>
第一步、设置元素为可拖动:
<img draggable="true">
第二步、设置拖动对象
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id)};
<img ondragstart="drag(event)"/>;
第三步、放置元素
function drop(ev){
ev.preventDefault();//阻止默认处理
var data=ev.dataTransfer.getData("Text");//获得拖动对象的值
ev.target.appendChild(window.document.getElementById(data));//将值加入到目标对象
};
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。