JavaScript中DataTransfer接口的概述及实例属性

使用setData方法，可以替换到原有数据。

  aaa

上面代码中，拖拉数据实际上是bbb，而不是aaa。

下面是添加其他类型的数据。由于text/plain是最普遍支持的格式，为了保证兼容性，建议最后总是保存一份纯文本格式的数据。

var dt = event.dataTransfer; // 添加链接dt.setData('text/uri-list', 'http://www.example.com');dt.setData('text/plain', 'http://www.example.com'); // 添加 HTML 代码dt.setData('text/html', 'Hello there, stranger');dt.setData('text/plain', 'Hello there, stranger'); // 添加图像的 URLdt.setData('text/uri-list', imageurl);dt.setData('text/plain', imageurl);

可以一次提供多种格式的数据。

var dt = event.dataTransfer;dt.setData('application/x-bookmark', bookmarkString);dt.setData('text/uri-list', 'http://www.example.com');dt.setData('text/plain', 'http://www.example.com');

上面代码中，通过在同一个事件上面，存放三种类型的数据，使得拖拉事件可以在不同的对象上面，drop不同的值。注意，第一种格式是一个自定义格式，浏览器默认无法读取，这意味着，只有某个部署了特定代码的节点，才可能drop（读取到）这个数据。

DataTransfer.getData()

DataTransfer.getData()方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据（通常是用setData方法添加的数据）。如果指定类型的数据不存在，则返回空字符串。通常只有drop事件触发后，才能取出数据。

下面是一个drop事件的监听函数，用来取出指定类型的数据。

function onDrop(event) {  var data = event.dataTransfer.getData('text/plain');  event.target.textContent = data;  event.preventDefault();}

上面代码取出拖拉事件的文本数据，将其替换成当前节点的文本内容。注意，这时还必须取消浏览器的默认行为，因为假如用户拖拉的是一个链接，浏览器默认会在当前窗口打开这个链接。

getData方法返回的是一个字符串，如果其中包含多项数据，就必须手动解析。

function doDrop(event) {  var lines = event.dataTransfer.getData('text/uri-list').split('\n');  for (let line of lines) {    let link = document.createElement('a');    link.href = line;    link.textContent = line;    event.target.appendChild(link);  }  event.preventDefault();}

上面代码中，getData方法返回的是一组链接，就必须自行解析。

类型值指定为URL，可以取出第一个有效链接。

var link = event.dataTransfer.getData('URL');

下面的例子是从多种类型的数据里面取出数据。

function doDrop(event) {  var types = event.dataTransfer.types;  var supportedTypes = ['text/uri-list', 'text/plain'];  types = supportedTypes.filter(function (value) { types.includes(value) });  if (types.length) {    var data = event.dataTransfer.getData(types[0]);  }  event.preventDefault();}

DataTransfer.clearData()

DataTransfer.clearData()方法接受一个字符串（表示数据类型）作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则调用该方法不会产生任何效果。

event.dataTransfer.clearData('text/uri-list');

上面代码清除事件所带的text/uri-list类型的数据。

该方法不会移除拖拉的文件，因此调用该方法后，DataTransfer.types属性可能依然会返回Files类型（前提是存在文件拖拉）。

注意，该方法只能在dragstart事件的监听函数之中使用，因为这是拖拉操作的数据唯一可写的时机。

DataTransfer.setDragImage()

拖动过程中（dragstart事件触发后），浏览器会显示一张图片跟随鼠标一起移动，表示被拖动的节点。这张图片是自动创造的，通常显示为被拖动节点的外观，不需要自己动手设置。

DataTransfer.setDragImage()方法可以自定义这张图片。它接受三个参数。第一个是节点或者节点，如果省略或为null，则使用被拖动的节点的外观；第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

下面是一个例子。

/* HTML 代码如下 
   drag me 
*/ var div = document.getElementById('drag-with-image');div.addEventListener('dragstart', function (e) {  var img = document.createElement('img');  img.src = 'http://path/to/img';  e.dataTransfer.setDragImage(img, 0, 0);}, false);

到此，关于"JavaScript中DataTransfer接口的概述及实例属性"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！