前面的話
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}this.innerHTML='有元素進(jìn)入目標(biāo)區(qū)域';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='元素已離開目標(biāo)區(qū)域';this.style.backgroundColor='lightblue';
}
target.ondrop=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
result.innerHTML='落入目標(biāo)區(qū)域的文字為:'+e.dataTransfer.getData('text');this.innerHTML='元素已落在目標(biāo)區(qū)域';this.style.backgroundColor='orange';
}
當(dāng)然，也可以在dragstart事件處理程序中調(diào)用setData()，手動(dòng)保存自己要傳輸?shù)臄?shù)據(jù)，以便將來(lái)使用
拖動(dòng)源拖放目標(biāo)//兼容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='有元素進(jìn)入目標(biāo)區(qū)域';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='元素已離開目標(biāo)區(qū)域';this.style.backgroundColor='lightblue';
}
target.ondrop=function(e){
e=e||event;if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
result.innerHTML='落入目標(biāo)區(qū)域的文字為:'+e.dataTransfer.getData('text');this.innerHTML='元素已落在目標(biāo)區(qū)域';this.style.backgroundColor='orange';
}
改變光標(biāo)
利用dataTransfer對(duì)象，不僅可以傳輸數(shù)據(jù)，還能通過(guò)它來(lái)確定被拖動(dòng)的元素以及作為放罝目標(biāo)的元素能夠接收什么操作。為此，需要訪問(wèn)dataTransfer對(duì)象的兩個(gè)屬性：dropEffect和effectAllowed
實(shí)際上，這兩個(gè)屬性并沒(méi)有什么用，只是拖動(dòng)源在拖動(dòng)目標(biāo)上移動(dòng)時(shí)，改變不同的光標(biāo)而已(但是，有一種情況除外)
dropEffect
dropEffect屬性可以知道被拖動(dòng)的元素能夠執(zhí)行哪種放置行為。這個(gè)屬性有下列4個(gè)可能的值
"none":不能把拖動(dòng)的元素放在這里。這是除文本框之外所有元素的默認(rèn)值(此時(shí)，將無(wú)法觸發(fā)drop事件)
"move":應(yīng)該把拖動(dòng)的元素移動(dòng)到放置目標(biāo)
"copy":應(yīng)該把拖動(dòng)的元素復(fù)制到放置目標(biāo)
"link":表示放置目標(biāo)會(huì)打開拖動(dòng)的元素（但拖動(dòng)的元素必須是一個(gè)鏈接，有URL)
在把元素拖動(dòng)到放置目標(biāo)上時(shí)，以上每一個(gè)值都會(huì)導(dǎo)致光標(biāo)顯示為不同的符號(hào)
[注意]必須在ondragover事件處理程序中針對(duì)放置目標(biāo)來(lái)設(shè)置dropEffect屬性
effectAllowed
dropEffect屬性只有搭配effectAllowed屬性才有用。effectAllowed屬性表示允許拖動(dòng)元素的哪種dropEffect
effectAllowed屬性可能的值如下
"uninitialized":沒(méi)有給被拖動(dòng)的元素設(shè)置任何放置行為
"none":被拖動(dòng)的元素不能有任何行為
"copy":只允許值為"copy"的dropEffect
"link"只允許值為"link"的dropEffect
"move":只允許值為"move"的dropEffect
"copyLink":允許值為"copy"和"link"的dropEffect
"copyMove":允許值為"copy"和"move"的dropEffect
"linkMove":允許值為"link"和"move"的dropEffect
"all":允許任意dropEffect
[注意]必須在ondragstart事件處理程序中設(shè)置effectAllowed屬性
拖放源
(none)拖放目標(biāo)(move)拖放目標(biāo)(copy)拖放目標(biāo)(link)拖放目標(biāo)//兼容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';
}
