Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
DataTransferItemList: length-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
Die schreibgeschütztelength-Eigenschaft desDataTransferItemList-Interfaces gibt die Anzahl der Elemente in der aktuellen Drag-Item-Liste zurück.
Wert
Die Anzahl der Drag-Daten-Elemente in der Liste oder 0, wenn die Liste leer oder deaktiviert ist. Die Drag-Item-Liste gilt als deaktiviert, wenn dasDataTransfer-Objekt der Item-Liste nicht mit einem Drag-Datenspeicher verknüpft ist.
Beispiele
Dieses Beispiel zeigt die Verwendung derlength-Eigenschaft.
HTML
html
<div> <p draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p></div><div>Drop Zone</div>CSS
css
div { margin: 0em; padding: 2em;}#source { color: blue; border: 1px solid black;}#target { border: 1px solid black;}JavaScript
js
const source = document.getElementById("source");const target = document.getElementById("target");source.addEventListener("dragstart", (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 const 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");});source.addEventListener("dragend", (ev) => { console.log("dragEnd"); const dataList = ev.dataTransfer.items; // Clear any remaining drag data dataList.clear();});target.addEventListener("drop", (ev) => { console.log("Drop"); ev.preventDefault(); const data = ev.dataTransfer.items; // Loop through the dropped items and log their data for (let 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((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((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((s) => { console.log(`… Drop: URI = ${s}`); }); } }});target.addEventListener("dragover", (ev) => { console.log("dragOver"); ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move";});Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-datatransferitemlist-length-dev |