html5拖拽总结

标签：

拖拽（Drag 和 drop）是 HTML5 标准的组成部分。拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

DataTransfer 对象

　　退拽对象用来传递的媒介，使用一般为Event.dataTransfer。

被拖元素： 

• ondragstart（开始拖拽）

　　　　function drag(ev) {

　　　　　　ev.dataTransfer.setData("Text",ev.target.id);

　　　　}

• ondrag(拖拽中) 
• ondragend(拖拽结束)

投放区：

• ondragenter(进入投放区) 
• ondragleave(离开投放区)
• ondragover(拖拽到何处)

　　　　若不阻止默认事件，则无法将元素放置到投放区。 阻止默认事件e.preventDefalut();

• ondrop(投放事件)   浏览器对元素默认以链接形式打开。

　　　　阻止默认：e.preventDefalut();

　　　　function drop(ev) {

　　　　　　ev.preventDefault();

　　　　　　var data=ev.dataTransfer.getData("Text");

　　　　　　ev.target.appendChild(document.getElementById(data));

　　　　}

html5拖拽总结

标签：

原文地址：http://www.cnblogs.com/yin-yi/p/4641377.html