| 属性/方法 | 类型 | 说明 |
|---|---|---|
| dropEffect | 属性 | 表示拖放元素的视觉效果，允许设置： none 、 copy 、 link 、 move 该效果必须在 effectAllowed 属性指定的视觉效果内 |
| effectAllowed | 属性 | 指定当前元素被拖放时允许的视觉效果可以指定值为： none 、 copy 、 copyLinK 、 copyMove 、 link 、 linkMove 、 move 、 all 、 uninitialized |
| types | 属性 | 存入的数据类型，字符串的伪数组 |
| clearData() | 方法 | 清除 DataTransfer 对象中存放的数据包含一个参数，设置清除的类型；如果省略参数，则清除全部数据 |
| setData() | 方法 | 向 DataTransfer 中储存数据 |
| getData() | 方法 | 从 DataTransfer 中获取数据 |
| setDragImage() | 方法 | 设置拖拽图标，部分浏览器支持使用 |
正确使用 DataTransfer 对象的属性和方法，可以实现拖放图标，或者定义只支持特定的拖放，如复制、移动等，甚至是更复杂的拖放操作。
dropEffect 和 effectAllowed 属性结合可以设置拖放时的视觉效果。 effectAllowed 属性表示当一个元素被拖动时允许的视觉效果，一般在 dragstart 事件中定义。
| 属性值 | 说明 |
|---|---|
| copy | 允许被拖动元素复制到相应的目标元素中 |
| move | 允许被拖动的元素移动到相应的目标元素中 |
| link | 通过拖放操作，被拖动元素会连接到目标元素上 |
| copyLink | 别拖动元素被复制或链接到目标元素将根据拖动的元素来决定是执行复制，还是链接 |
| copyMove | 别拖动元素被复制或移动到目标元素将根据拖动的元素来决定是执行复制，还是移动 |
| linkMove | 别拖动元素被链接或移动到目标元素将根据拖动的元素来决定是执行链接，还是移动 |
| all | 允许所有的操作，包括复制、移动、链接操作 |
| none | 不允许任何操作 |
| unintialize | 不指定 effectAllowed 将执行浏览器的默认允许拖动动作。但是该操作不通过 effectAllowed 来获取值 |
DataTransfer 对象的 dropEffect 属性表示实际拖放时的视觉效果，一般在 dragover 事件中指定，允许设置值为 none 、 copy 、 link 、 move 。 dropEffect 属性所表示的实际视觉效果必须与 effectAllowed 属性值所允许的操作相匹配，规则如下：
e(source, 'dragstart', function (event) {
let d = event.dataTransfer;
d.effectAllowed = 'copy';
d.setData('text/plain', this.innerHTML);
});
e(dest, 'dragover', function (event) {
let t = event.dataTransfer;
t.dropEffect = 'copy';
});
DataTransfer 对象的 setDragImage() 包括三个参数：
<head>
<style>
#drag {
width: 200px;
height: 200px;
background-color: #f0f;
border-radius: 12px;
text-align: center;
line-height: 200px;
color: #ff0;
}
#target {
position: relative;
left: 1000px;
top: 100;
width: 400px;
height: 400px;
border: 1px dotted #00f;
margin: -100px 12px 12px; /* float: right; */
overflow: auto;
padding: 2rem 0;
}
#target h1 {
text-align: center;
width: 100%;
position: relative; /* background-color: #; */
z-index: 100;
top: 0;
left: 0;
text-align: center;
color: #0f0;
margin: 6px 0;
font-size: 16px;
}
</style>
</head>
<body>
<div id="drag" draggable="true">圆圆的屁股</div>
<div id="target"><h1>大大的脸</h1></div>
</body>
<script>
let dIcon = document.createElement('img');
dIcon.src = 'image/lmssee.ico';
dIcon.width = '20px';
function init() {
let source = mi('drag');
let dest = mi('target');
e(source, 'dragstart', function (event) {
let d = event.dataTransfer;
d.setDragImage(dIcon, -10, -10);
d.effectAllowed = 'copy';
d.setData('text/plain', this.innerHTML);
});
e(dest, 'dragover', function (event) {
let t = event.dataTransfer;
t.dropEffect = 'copy';
});
e(dest, 'dragend', function (event) {
event.preventDefault();
});
e(dest, 'drop', function (event) {
var t = event.dataTransfer;
var x = t.getData('text/plain');
dest.innerHTML += '<p>' + x + '</p>';
event.preventDefault();
event.stopPropagation();
});
}
init();
document.ondragover = function (event) {
event.preventDefault();
};
document.ondrop = function (event) {
event.preventDefault();
};
function mi(id) {
return document.querySelector('#' + id);
}
function e(n, event, fn) {
if (n.nodeType != 1 && mi(n) != null) {
n = mi(n);
} else if (n.nodeType == 1) {
n = n;
} else if (n.nodeType != 1 && mi(n) == null) {
throw new Error('为捕获元素');
}
if (n.addEventListener) {
n.addEventListener(event, fn, false);
} else if (n.attachEvent) {
n.attachEvent('on' + event, fn);
} else {
n['on' + event] = fn;
}
}
</script>