前面的话
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}this.innerHTML='有元素进入目标区域';this.style.background='red';
}
target.ondragover=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
target.ondragleave=function(e){
e=e||event;this.innerHTML='元素已离开目标区域';this.style.backgroundColor='lightblue';
}
target.ondrop=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
result.innerHTML='落入目标区域的文字为:'+e.dataTransfer.getData('text');this.innerHTML='元素已落在目标区域';this.style.backgroundColor='orange';
}
当然，也可以在dragstart事件处理程序中调用setData()，手动保存自己要传输的数据，以便将来使用
拖动源拖放目标//兼容IE8-浏览器test.onmousedown=function(){if(this.dragDrop){this.dragDrop();
}
}
test.ondragstart=function(e){
e=e||event;
e.dataTransfer.setData('text',test.getAttribute('data-value'));
}
target.ondragenter=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}this.innerHTML='有元素进入目标区域';this.style.background='red';
}
target.ondragover=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
target.ondragleave=function(e){
e=e||event;this.innerHTML='元素已离开目标区域';this.style.backgroundColor='lightblue';
}
target.ondrop=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
result.innerHTML='落入目标区域的文字为:'+e.dataTransfer.getData('text');this.innerHTML='元素已落在目标区域';this.style.backgroundColor='orange';
}
改变光标
利用dataTransfer对象，不仅可以传输数据，还能通过它来确定被拖动的元素以及作为放罝目标的元素能够接收什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed
实际上，这两个属性并没有什么用，只是拖动源在拖动目标上移动时，改变不同的光标而已(但是，有一种情况除外)
dropEffect
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值
"none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值(此时，将无法触发drop事件)
"move":应该把拖动的元素移动到放置目标
"copy":应该把拖动的元素复制到放置目标
"link":表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL)
在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号
[注意]必须在ondragover事件处理程序中针对放置目标来设置dropEffect属性
effectAllowed
dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动元素的哪种dropEffect
effectAllowed属性可能的值如下
"uninitialized":没有给被拖动的元素设置任何放置行为
"none":被拖动的元素不能有任何行为
"copy":只允许值为"copy"的dropEffect
"link"只允许值为"link"的dropEffect
"move":只允许值为"move"的dropEffect
"copyLink":允许值为"copy"和"link"的dropEffect
"copyMove":允许值为"copy"和"move"的dropEffect
"linkMove":允许值为"link"和"move"的dropEffect
"all":允许任意dropEffect
[注意]必须在ondragstart事件处理程序中设置effectAllowed属性
拖放源
(none)拖放目标(move)拖放目标(copy)拖放目标(link)拖放目标//兼容IE8-浏览器test.onmousedown=function(){if(this.dragDrop){this.dragDrop();
}
}
test.ondragstart=function(e){
e=e||event;//兼容firefox浏览器e.dataTransfer.setData('text','');
e.dataTransfer.effectAllowed='all';
}
target1.ondragenter=target2.ondragenter=target3.ondragenter=target4.ondragenter=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}this.style.background='red';
}
target1.ondragover=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
e.dataTransfer.dropEffect='none';
}
target2.ondragover=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
e.dataTransfer.dropEffect='move';
}
target3.ondragover=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
e.dataTransfer.dropEffect='copy';
}
target4.ondragover=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
e.dataTransfer.dropEffect='link';
}
target1.ondragleave=target2.ondragleave=target3.ondragleave=target4.ondragleave=function(e){
e=e||event;this.style.backgroundColor='lightblue';
}
target1.ondrop=target2.ondrop=target3.ondrop=target4.ondrop=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}this.style.backgroundColor='orange';
}
