拖拉事件
最后更新于：2022-04-02 03:26:31
[TOC]
## 拖拉事件
```
' + 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(); } ```
';
此区域可拖拉
```
### 事件种类
被拖拉的节点事件
* `drag`：拖拽时,不断触发（相隔几百毫秒）。
* `dragstart`：开始拖拉,的`target`属性就是被拖拽的值。
* `dragend`：拖拉结束,，`target`属性是与`dragstart`相同,做结束拖拉的样式
放置目标节点的事件
* `dragenter`：在可放置的节点触发,触发,`target`为当前节点
* `dragover`：在可拖拉处,不放置,则持续触发。
* `dragleave`：离开可放置的目标节点时触发
* `drop`：放置时触发
## 拖拉文件
### DataTransfer.files
```
// html
// 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 + '' + 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(); } ```