html 5自带drag属性详解_IT百科

先介绍一下html5的drag想要启用drag，只要给元素加上draggable="true"就行了（firefox除外，后面会讲到），默认a和img就是可以拖动的。

在线演示地址 http://jsrun.net/JpiKp/edit ，但是在firefox中只是这样还是无法拖动的。还需要加上拖动事件

事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。

一.发生在拖动元素上的事件：

二.发生在目标元素上的事件

可以通过addEventListener来添加事件监听或者直接使用dom0，在firefox中就必须添加dragstart事件并使用event.dataTransfer.setData来添加传递信息

在拖动元素时可以设置传递的信息

event.dataTransfer.setData("te", “sss)两个参数，第一个参数key，第二个参数value。注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。

使用event.preventDefault()可以阻止浏览器默认事件

接下来写一个简单的例子，在线演示地址 http://jsrun.net/JpiKp/edit

html

其他事件大家可以自己试一试

<!DOCTYPE html>

<html>

<head>

window.onload=function()

{

var aDiv = document.getElementsByTagName('div')

for (var i=0 i<aDiv.length i++)

{

aDiv[i].onmouseover=function()

{

alert(this.innerHTML)//d出鼠标滑过区域

}

</script>

</head>

<body>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

html 5自带drag属性详解