html5拖拽總結

拖拽（Drag 和 drop）是 HTML5 標準的組成部分。拖拽是一種常見的特性，即抓取對象之後拖到另外一個位置。

Internet Explorer 九、Firefox、Opera 十二、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));

　　　　}