标签:
HTML5 draggable属性:
此属性规定元素是否可拖动。
链接和图像默认是可拖动的。
语法结构:
<element draggable="true|false|auto">
浏览器支持:
(1).IE8 以上浏览器支持此属性。
(2).谷歌浏览器支持此属性。
(3).火狐浏览器支持此属性。
(4).Safari浏览器支持此属性。
(5).Opera浏览器支持此属性。
HTML4.01与HTML5之间的差异:
draggable属性是HTML5新增的。
属性值:
值 | 描述 |
true | 规定元素是可拖动的。 |
false | 规定元素是不可拖动的。 |
auto | 使用浏览器的默认特性。 |
代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> #antzone{ width:350px; height:70px; padding:10px; border:1px solid #ccc; } </style> <script type="text/javascript"> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } window.onload=function(){ var odiv=document.getElementById("antzone"); var op=document.getElementById("drag"); odiv.ondrop=function(ev){ drop(ev); } odiv.ondragover=function(ev){ allowDrop(ev) } op.ondragstart=function(ev){ drag(ev) } } </script> </head> <body> <div id="antzone"></div> <p id="drag" draggable="true">可把该段落拖入上面的矩形</p> </body> </html>
原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0618/4618.html
最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10036
标签:
原文地址:http://www.cnblogs.com/come-on/p/4725885.html