只读
DataTransfer
property
项
特性为
list
的
data transfer items
in a drag operation. The list includes one item for each item in the operation and if the operation had no items, the list is empty.
itemList = dataTransfer.items;
A
DataTransferItemList
object containing
DataTransferItem
objects representing the items being dragged in a drag operation, one list item for each object being dragged. If the drag operation had no data, the list is empty.
This example shows the use of the
项
and
类型
特性。
<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer.{types,items} properties</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart: target.id = " + ev.target.id);
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: target.id = " + ev.target.id);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
// Print each format type
if (ev.dataTransfer.types != null) {
for (var i=0; i < ev.dataTransfer.types.length; i++) {
console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
}
}
// Print each item's "kind" and "type"
if (ev.dataTransfer.items != null) {
for (var i=0; i < ev.dataTransfer.items.length; i++) {
console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
}
}
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1>
<ul>
<li id="i1" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 1 to the Drop Zone</li>
<li id="i2" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
</html>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'items' in that specification. |
实时标准 | |
|
HTML 5.1
The definition of 'items' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
项
|
Chrome 4 | Edge 12 | Firefox 50 | IE No | Opera 12 | Safari No | WebView Android Yes | Chrome Android Yes | Firefox Android 52 | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
完整支持
不支持
DataTransfer