[TOC] ## 拖拉事件 ``` <div draggable="true"> 此區域可拖拉 </div> ``` ### 事件種類 被拖拉的節點事件 * `drag`：拖拽時,不斷觸發（相隔幾百毫秒）。 * `dragstart`：開始拖拉,的`target`屬性就是被拖拽的值。 * `dragend`：拖拉結束,，`target`屬性是與`dragstart`相同,做結束拖拉的樣式 放置目標節點的事件 * `dragenter`：在可放置的節點觸發,觸發,`target`為當前節點 * `dragover`：在可拖拉處,不放置,則持續觸發。 * `dragleave`：離開可放置的目標節點時觸發 * `drop`：放置時觸發 ## 拖拉文件 ### DataTransfer.files ``` // html <div id="output" style="min-height: 200px;border: 1px solid black;"></div> // js var div = document.getElementById('output'); div.addEventListener("dragenter", function( event ) { div.textContent = ''; event.stopPropagation(); event.preventDefault(); }, false); div.addEventListener("dragover", function( event ) { event.stopPropagation(); event.preventDefault(); }, false); div.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); var fileList = e.dataTransfer.files; if (fileList.length > 0) { var file = fileList[0]; var reader = new FileReader(); reader.onloadend = function(e) { if (e.target.readyState === FileReader.DONE) { var content = reader.result; div.innerHTML = 'File: ' + file.name + '<br/><br/>' + content; } } reader.readAsBinaryString(file); } }); ``` ### DataTransfer.types `DataTransfer.types`屬性是一個只讀的數組,里面是拖拉的數據格式（通常是 MIME 值）。比如，如果拖拉的是文字，對應的成員就是`text/plain` ### DataTransfer.getData() ``` function onDrop(event) { var data = event.dataTransfer.getData('text/plain'); event.target.textContent = data; event.preventDefault(); } ```