[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(); } ```