H5的拖放功能主要是通过drag和drop来实现的,目前IE9、Firefox、Opera 12、Chrome 以及 Safari 5 是支持拖放的,Safari 5.1.2 中不支持拖放。下面先放一个代码实例:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1{
width:12rem;
height:12rem;
float:left;
}
#drag1{
width:10rem;
height:10rem;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="001.jpg" draggable="true"
ondragstart="drag(event)"/>
<script>
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
从上面实例中可以看到js中有三个函数,通过解读这三个函数的功能可以发现H5实现拖放效果是很简单的,下面就介绍一下具体的过程:
1、首先我们要知道被拖放的元素是什么,然后给它添加一个可拖放的属性即draggable的值设置为true
,然后我们要给它添加一个拖放发生事件ondragstart并绑定一个drag( )函数,在drag()函数里面我们添加一个dataTransfer.setData() 方法,设置被拖数据的数据类型和值:
function drag(event) { event.dataTransfer.setData("Text",event.target.id); }
这里其实就是一个id的字符串,方便后面通过id来捕获这个元素并进行放置。
2、然后我们要知道元素放在哪里,就要设置一个ondragover事件,默认地我们无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法:
function allowDrop(event) { event.preventDefault(); }
3、最后我们将元素进行放置,设置ondrop事件并绑定一个drop()函数:
function drop(event) { event.preventDefault(); var data=event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }
其中event.preventDefault()方法是为了避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开),event.dataTransfer.getData(“Text”)是获取前面设置的被拖放的数据,然后用appendChild( )方法对拖放元素进行放置。