在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

DataTransferItemList.remove() method removes the DataTransferItem at the specified index from the list. If the index is less than zero or greater than one less than the length of the list, the list will not be changed.

句法

DataTransferItemList.remove(index);
					

参数

index

The zero-based index number of the item in the drag data list to remove. If the index doesn't correspond to an existing item in the list, the list is left unchanged.

返回值

undefined .

异常

InvalidStateError

The drag data store is not in read/write mode, so the item can't be removed.

范例

This example shows the use of the remove() 方法。

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 = event.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;
  for (var i = 0; i < dataList.length; i++) {
    dataList.remove(i);
  }
  // Clear any remaining drag data
  dataList.clear();
}
					

HTML

<h1>Example uses of <code>DataTransferItemList</code> methods and property</h1>
 <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 实时标准 The definition of 'remove()' in that specification.	实时标准
HTML 5.1 The definition of 'remove()' in that specification.	推荐	Not included in W3C HTML5 推荐

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
remove	Chrome 31	Edge 12	Firefox 50	IE No	Opera 12	Safari 6	WebView Android 4.4.3	Chrome Android 31	Firefox Android 50	Opera Android No	Safari iOS 6	Samsung Internet Android 2.0

图例

完整支持

完整支持

不支持

不支持

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. HTML 拖放 API
2. DataTransferItemList
3. 特性

   1. length
4. 方法

   1. add()
   2. clear()
   3. DataTransferItem()
   4. remove()
5. Related pages for HTML Drag and Drop API

   1. DataTransfer
   2. DataTransferItem
   3. DragEvent