MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

DataTransfer.getData() 方法接受指定类型的拖放(以DOMString的形式)数据。如果拖放行为没有操作任何数据,会返回一个空字符串。

数据类型有:text/plaintext/uri-list。

语法

DOMString dataTransfer.getData(format);

参数

format
DOMString类型

返回值

DOMString
返回一个给定类型的DOMString格式的数据。如果没有操作数据或者没有指定操作数据的类型,都会返回一个空字符串。

示例

这个例子展示了 DataTransfer对象的getData()setData()方法。

HTML Content

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS Content

#div1, #div2 {
    width:100px;
    height:50px;
    padding:10px;
    border:1px solid #aaaaaa;
}

JavaScript Content

function allowDrop(allowdropevent) {
    allowdropevent.target.style.color = 'blue';
    allowdropevent.preventDefault();
}

function drag(dragevent) {
    dragevent.dataTransfer.setData("text", dragevent.target.id);
    dragevent.target.style.color = 'green';
}

function drop(dropevent) {
    dropevent.preventDefault();
    var data = dropevent.dataTransfer.getData("text");
    dropevent.target.appendChild(document.getElementById(data));
    document.getElementById("drag").style.color = 'black';
}

结果

说明

Specification Status Comment
WHATWG HTML Living Standard
getData()
Living Standard  
HTML5.1
getData()
Recommendation Initial definition

兼容性

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 (Yes) 3.5 [1] 10 (10) 12 3.1
  
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 (Yes) 10.0 (10)[1] 未实现 10 未实现 未实现

[1] 在Firefox 48之前,如果指定的MIME类型不合法,这个方法返回的是一个空数组。

参考

文档标签和贡献者

 此页面的贡献者: maicss
 最后编辑者: maicss,