DataTransfer对象的一些总结

最新推荐文章于 2025-06-26 16:56:46 发布

原创最新推荐文章于 2025-06-26 16:56:46 发布 · 2w 阅读

19 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

50 篇文章

订阅专栏

javascript

41 篇文章

订阅专栏

本文详细介绍了如何通过重写dragenter和dragover事件使任意元素变为有效的放置目标，并演示了如何设置ondrop事件来处理放置操作。此外，还讨论了dataTransfer对象的使用，包括setData和getData方法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有元素都支持防止目标事件，但是这些元素默认是不允许释放的，如果拖动元素经过不允许放置的元素无论用户如何操作，都不会触发drop事件，不过可以把任何元素变成有效的放置目标。方法是重写dropenter和droppover的默认行为：

<input id="moveSrc" value="我要被移动到红色div中去"></input>
<div id="moveTarget" style="width:100px;height:100px;background-color:red;"></div>
<div id="droptarget" style="height:100px;width:100px;border:1px solid red;"></div>
<p id="srcE">Hello </p>

首先我们需要把元素droptarget设置为可以放置的元素，也就是默认重写他的dragenter/dragover

//首先通过重写dragover/dragenter事件使得元素成为可以放置的元素
 target.ondragover=function(event)
{
  event.preventDefault();
};
target.ondragenter=function(event)
{
  event.preventDefault();
};

然后我们需要给该元素设置一个drop事件，表示元素被放置时候触发的事件

//设置ondrop事件，如果放下了那么处理该事件!
target.ondrop=function(event)
{
  //在FF3.5+中，放置事件的默认行为是打开被放置目标上的URL，如果是图片
  //打开URL，如果是文本就会打开无效的URL，因此为了放FF支持正常拖放，需要默认事件!
  event.preventDefault();
  //event.target是触发事件的元素
  event.target.innerHTML=event.dataTransfer.getData('Text');
};

为移动的元素设置dragstart事件,该事件用于存放需要移动的数据

//为需要移动的元素设置dragstart！
 document.getElementById("srcE").ondragstart=function(event)
{
 event.dataTransfer.setData("Text","我要把我的数据传输过去！");
};

这时候当移动srcE的时候，并且在droptarget中释放，就会发现其内部文本变成了"我把我的数据传输过去"!
下面我要实现把文本框中的内容移动到第一个div中：

第一步：首先把第一个div变成可以放置的元素，即重写dragenter/dragover

//重写moveTarget的dragenter和dragover让红色的div可以放置
document.getElementById("moveTarget").ondragenter=function(e)
{
 e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
  e.preventDefault();
};
document.getElementById("moveTarget").ondragover=function(e)
{
   e.preventDefault();
};

第二步：为需要移动的元素设置dragstart事件

document.getElementById("moveSrc").ondragstart=function(e)
{
  e.dataTransfer.effectAllowed="move";//必须在dragstart中设置effectStart
};

第三步：重写div的drop事件

//重写了div的drop事件，因为默认情况下是什么也不做
 document.getElementById("moveTarget").ondrop=function(event)
{
 
   this.innerHTML=document.getElementById("moveSrc").value;
//火狐中取消drop默认行为，阻止打开URL
 event.preventDefault();
};

这时候也能实现文本框元素内容的移动!

注意：

(1)要使用dropEffect属性，必须在dragenter事件处理程序中针对放置目标来设置!
(2)dropEffect只有搭配effectAllowed属性才能用，effectAllowed表示允许拖动元素的那种dropEffect,而且effectAllowed在被移动元素的dragStart中设置!
(3)dropEffect只会导致光标显示为不同的符号，然而要怎么实现光标所指示的动作完全取决于代码的编写者，也就是说只要你不介入，没有什么会自动的移动，复制，也不会打开链接，总之，浏览器只能帮你改变光标的样式!

(4)当拖动文本框的时候，浏览器会调用setData将拖动文本以text格式保存到dataTransfer中，在拖动链接或者图片时候会保存URL，这样在drop事件中就可以读取了!

//注意：在这里我没有调用setData保存文本框的数据到dataTransfer中!
document.getElementById("moveSrc").ondragstart=function(e)
{
  e.dataTransfer.effectAllowed="copy";
};
//重写moveTarget的dragenter和dragover让红色的div可以放置
document.getElementById("moveTarget").ondragenter=function(e)
{
 e.dataTransfer.dropEffect="copy";
  e.preventDefault();
};
document.getElementById("moveTarget").ondragover=function(e)
{
   e.preventDefault();
};
//重写了div的drop事件，因为默认情况下是什么也不做
 document.getElementById("moveTarget").ondrop=function(event)
{
 event.target.innerHTML=event.dataTransfer.getData('text');
 event.preventDefault();
};

在这个例子，在dragStart中我没有手动保存数据，但是在ondrop中用event.dataTransfer.getData('text')获取到了数据了!,至一点要特别注意，调用getData时候传入的是"text"!
但是我们建议还是通过手动调用setData来完成同样的操作!

(5)dataTransfer对象可以为每一种MIME类型都保存一个值，不过保存在dataTransfer对象中的数据只能在drop事件程序中读取，如果没有读取到，那么就是dataTransfer对象被销毁了，数据也丢失了!

document.getElementById("moveSrc").ondragstart=function(event)
{
//同时保存了URL和text类型
  event.dataTransfer.effectAllowed="copy";
  event.dataTransfer.setData('text','liangklfang');
  event.dataTransfer.setData('url','www.baidu.com');
};
//重写moveTarget的dragenter和dragover让红色的div可以放置
document.getElementById("moveTarget").ondragenter=function(e)
{
 e.dataTransfer.dropEffect="copy";
  e.preventDefault();
};
document.getElementById("moveTarget").ondragover=function(e)
{
   e.preventDefault();
};
//FF在第5个版本之前不能正确的将url和text映射为text/uri-list和text/plain
//但是可以将Text映射为text/plain,所以最好在检测URL时候检测两个值!
//获取文本时候用Text!
 document.getElementById("moveTarget").ondrop=function(event)
{
var url=event.dataTransfer.getData('url')||event.dataTransfer.getData('text/uri-list');
var text= event.dataTransfer.getData('Text');//因为上面保存的是URL，所以在FF浏览器中drop事件调用以后就直接打开了指定的地址
 this.innerHTML=url+text;
 event.preventDefault();
};

总结：dataTransfer对象我在火狐浏览器低版本安装YSLOW时候见过，还是不错的技术!