DataTransferItemList
接口的只读属性length
返回当前拖动项列表中项目的数量.
语法
length = DataTransferItemList.length;
值
列表中拖动项的数量,如果列表为空或禁用则为0。如果列表的DataTransfer
对象未与拖动数据存储关联,则认为拖动列表被禁用。
示例
这个例子演示了length
属性的用法。
JavaScript
function dragstart_handler(ev) {
console.log("dragStart");
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
var dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
// Add some other items to the drag payload
dataList.add("<p>... paragraph ...</p>", "text/html");
dataList.add("http://www.example.org","text/uri-list");
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
var data = ev.dataTransfer.items;
// Loop through the dropped items and log their data
for (var i = 0; i < data.length; i++) {
if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) {
// This item is the target node
data[i].getAsString(function (s){
ev.target.appendChild(document.getElementById(s));
});
} else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) {
// Drag data item is HTML
data[i].getAsString(function (s){
console.log("... Drop: HTML = " + s);
});
} else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) {
// Drag data item is URI
data[i].getAsString(function (s){
console.log("... Drop: URI = " + s);
});
}
}
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
}
function dragend_handler(ev) {
console.log("dragEnd");
var dataList = ev.dataTransfer.items;
// Clear any remaining drag data
dataList.clear();
}
HTML
<div>
<p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
结果
规范
规范 | 状态 | 备注 |
---|---|---|
HTML Living Standard length |
Living Standard | |
HTML 5.1 length |
Recommendation | Not included in W3C HTML5 Recommendation |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.