所有元素都支持防止目标事件,但是这些元素默认是不允许释放的,如果拖动元素经过不允许放置的元素无论用户如何操作,都不会触发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时候见过,还是不错的技术!
---------------------
作者:liangklfang
来源:CSDN
原文:https://blog.csdn.net/liangklfang/article/details/48628171
版权声明:本文为博主原创文章,转载请附上博文链接!

05-11 22:45