[html5]html5拖放动作的源代码范例（拖动事件）

拖动事件

dragstart:网页元素开始拖动时触发。

drag:被拖动的元素在拖动过程中持续触发。

dragenter:被拖动的元素进入目标元素时触发，应在目标元素监听该事件。

dragleave:被拖动的元素离开目标元素时触发，应在目标元素监听该事件。

dragover:被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。

drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。

dragend:网页元素拖动结束时触发。

注意：以上这些事件都可以指定回调函数。

<ul id="drags">  
    <li draggable="true">A</li>  
    <li draggable="true">B</li>  
    <li draggable="true">C</li>  
</ul>  
<ul id="drops"></ul> 

<script type="text/javascript">  
//获取目标元素  
var target = document.querySelector('#drops');  
//获取需要拖放的元素  
var dragElements = document.querySelectorAll('#drags li');  
//临时记录被拖放的元素  
var elementDragged = null;  
//循环监听被拖放元素的开始拖放和结束拖放事件  
for (var i = 0; i < dragElements.length; i++) {  
    //开始拖放事件监听  
    dragElements[i].addEventListener('dragstart', function(e) {  
        //设置当前拖放元素的数据参数  
        e.dataTransfer.setData('text', this.innerHTML);  
        //保存当前拖放对象  
        elementDragged = this;  
    });  
    //结束拖放事件监听  
    dragElements[i].addEventListener('dragend', function(e) {  
        //注销当前拖放对象  
        elementDragged = null;  
    });  
}  
//目标元素监听被拖放元素进入事件  
target.addEventListener('dragover', function(e) {  
    //阻止浏览器默认行为  
    e.preventDefault();  
    //设置鼠标样式  
    e.dataTransfer.dropEffect = 'move';  
    return false;  
});  
//目标元素监听当被拖放元素落下时刻事件  
target.addEventListener('drop', function(e) {  
    //阻止默认行为  
    e.preventDefault();  
    //cuplayer.com提示：阻止默认行为  
    e.stopPropagation();  
    //获取当前被拖放元素的存放数据参数  
    var text = e.dataTransfer.getData('text');  
    //建立元素  
    var node=document.createElement("li");  
    var textnode=document.createTextNode(text);  
    node.appendChild(textnode);  
    this.appendChild(node);  
    //删除被拖放元素  
    document.querySelector('#drags').removeChild(elementDragged);      
    return false;  
});  
</script> 

[html5]html5拖放动作的源代码范例（拖动事件）来源http://www.helloweba.com/view-blog-270.html