HTML5 drag & drop 拖拽與拖放

進入個人部落格 Eighteen Blog

拖拽與拖放

drop & drag 是html5自帶的拖拽與拖放的api

文法：

所有需要被拖動的元素都要加上draggable屬性，預設除了a，img等标簽外不可拖動。

// html 行内綁定
<element ondrag="myScript">
// js 綁定元素
object.ondrag=function(){};
// 全局監聽
object.addEventListener("drag", myScript);
           

相關重點api

• 拖拽元素上觸發的事件（事件target是拖拽元素）

1. dragstart 被拖拽元素開始被拖拽時觸發。
2. drag 被拖拽元素拖拽中觸發
3. dragend 完成拖動時觸發。

• 拖拽目标容器上的事件（事件target是目标容器）

1. dragenter 被拖拽元素在進入其原始容器内的時候觸發。
2. dragleave 跟enter相對應。
3. dragover 在另一容器内時觸發（實測，隻要我開始拖動之後就一直觸發，且該事件需要阻止浏覽器預設事件，因為在其他容器内都是預設不能拖動的。）
4. drop 釋放滑鼠時候觸發

DataTransfer 是拖拽元素的一個媒介對象，可以設定一些功能

• dataTransfer.dropEffect：設定或傳回拖放目标上允許發生的拖放行為。如果此設定的拖放行為不在effectAllowed屬性設定的多種拖放行為之内，拖放操作将會失敗。該屬性值隻允許none、copy、link、move值之一。
• dataTransfer.effectAllowed：設定或傳回被拖動元素允許發生的拖動行為。該屬性值可設定為none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。
• dataTransfer.items：該屬性傳回DataTransferItems對象，該對象代表了拖動資料。
• dataTransfer.setDragImage(element x,y)：設定拖放操作的自定義圖示。其中element設定自定義圖示，x設定圖示與滑鼠在水準方向的距離；y設定圖示與滑鼠在垂直方向的距離。
• dataTransfer.addElement(element)：添加自定義圖示。
• dataTransfer.types：該屬性傳回一個DOMStringList對象，該對象包括了存入dataTransfer中資料的所有類型。
• dataTransfer.getData(format)：擷取DataTransfer對象中設定format格式的資料。其中format代表資料格式，data代表資料。
• dataTransfer.clearData([format])：清除DataTransfer對象中format格式的資料，如果省略format格式，則意味着清除DataTransfer對象中的全部資料。

例子

<span  draggable="true" ></span>  // 所有需要被拖動的元素都要加上draggable屬性，預設除了a，img等标簽外不可拖動。

document.addEventListener("dragstart", function (event) { //start drag end 中 event都是被拖拽的元素
                var id = $(event.target).prop('id'); 
                event.dataTransfer.dropEffect = 'move' //設定拖動樣式
            });
document.addEventListener("dragover", function(event) { //dragover dragleave   dragenter drop 中event都代表拖放的容器元素   
                // drop 阻止浏覽器預設事件
                event.preventDefault();
                console.log("容器内");
            });