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
HTML Living Standard
getData()
Living Standard  
HTML 5.1
getData()
Recommendation Initial definition

兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

  
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,