所有元素都支持防止目标事件，但是这些元素默认是不允许释放的，如果拖动元素经过不允许放置的元素无论用户如何操作，都不会触发drop事件，不过可以把任何元素变成有效的放置目标。方法是重写dropenter和droppover的默认行为：
<input id="moveSrc" value="我要被移动到红色div中去"></input> <div id="moveTarget" style="100px;height:100px;background-color:red;"></div> <div id="droptarget" style="height:100px;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时候见过，还是不错的技术!
---------------------
作者：liangklfang
来源：CSDN
原文：https://blog.csdn.net/liangklfang/article/details/48628171
版权声明：本文为博主原创文章，转载请附上博文链接！