标签：lis class div query tor end 数据 方法 指定
如果想要网页上的元素能拖动，则需要把元素的draggable属性设为true
<div draggable="true">Draggable please</div>
ps:有些浏览器中，a元素和img元素默认是可以拖动的，但最好还是加上该属性。
（1）dragstart:网页元素开始拖动时触发。
（2）drag:被拖动元素在拖动过程中一直保持触发和被拖动元素或从文件系统选中的文件，拖放落下时触发。
（3）dragend:网页元素拖动结束时触发。
draggableElement.addEventListener(‘dragstart‘,function(e){
console.log(‘拖动开始！‘);
});
（1）dragenter:被拖动的元素进入目标元素时触发。
（2）dragleave:被拖动的元素离开目标元素时触发。
（3）dragover:被拖动元素停留在目标元素时触发。
ps: 这三个事件都要阻止元素的默认行为发生，即调用preventdefault()函数，因为元素本身是不可以放入另一个元素的。
targetElement.addElementListener(‘dragover‘,function(e){
e.preventdefault();
e.stopPropagation();
console.log(‘停留在目标元素上面‘);
});
拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。
draggableElement.addEventListener(‘dragstart‘,function(event){
event.dataTransfer.setData(‘text‘,‘Hello world!‘);
});
上面代码在拖动开始时，在dataTransfer对象上存储一条文本信息，内容为“hello world!”。当拖动结束时，可以用getData方法取出这条信息。
dataTransfer对象的属性：
dataTransfer对象的方法：
dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
html5拖动API
</title>
<style type="text/css">
*{
margin: 20px;
padding: 10px;
}
#target{
width: 300px;
height: 400px;
background-color: #123456;
}
span{
display: block;
background-color: #123456;
}
</style>
<script type="text/javascript">
window.onload=function(){
var target = document.getElementById(‘target‘);
var dragElment=document.querySelectorAll("#container span");
for (var i = 0; i < dragElment.length; i++) {
dragElment[i].addEventListener(‘dragstart‘,function(e){
e.dataTransfer.setData(‘text‘,this.innerHTML);
});
}
target.addEventListener(‘dragover‘, function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = ‘move‘;
});
target.addEventListener(‘drop‘,function(e){
e.preventDefault();
e.stopPropagation();
this.innerHTML=‘你选中的是“我爱双妙”中的：‘+e.dataTransfer.getData(‘text‘);
});
}
</script>
</head>
<body>
<div id="container">
<span draggable="true">我</span>
<span draggable="true">爱</span>
<span draggable="true">双妙</span>
</div>
<div id="target"></div>
</body>
</html>
原文：http://www.cnblogs.com/jscode/archive/2013/05/10/3575024.html
标签：lis class div query tor end 数据 方法 指定
原文地址：http://www.cnblogs.com/dongzixiansheng/p/6973672.html
