1.源元素事件(要拖拽的文件)
dragStart - 當(dāng)鼠標(biāo)開始拖放時(shí)被觸發(fā)
drag - 當(dāng)鼠標(biāo)拖放過程中被觸發(fā)
dragend 當(dāng)鼠標(biāo)拖放結(jié)束時(shí)被觸發(fā)
2.目標(biāo)元素事件(要拖拽到哪里去)
dragover - 當(dāng)鼠標(biāo)到達(dá)目標(biāo)元素被觸發(fā)签钩，會(huì)反復(fù)觸發(fā)
dragenter - 當(dāng)鼠標(biāo)拖放進(jìn)入到目標(biāo)元素內(nèi)觸發(fā)
drop - 當(dāng)鼠標(biāo)實(shí)現(xiàn)拖放效果時(shí)被觸發(fā)
HTML頁面默認(rèn)不允許拖放睁壁，稱之為HTML頁面的默認(rèn)行為
解決：在dragover的事件中組織默認(rèn)行為即可event.preventDefault();
3.dataTransfer對(duì)象(類似于window系統(tǒng)的剪切板功能)
獲取到dataTransfer對(duì)象
var trans = event.dataTransfer;-
設(shè)置數(shù)據(jù)
setData(type,data) type:類型针饥，特指標(biāo)識(shí)(id)淘这，一般為字符串 data:設(shè)置的數(shù)據(jù)內(nèi)容 獲取數(shù)據(jù)
getData(type);清除數(shù)據(jù)
clearData(type)
所有的數(shù)據(jù)內(nèi)容袁梗，存儲(chǔ)在瀏覽器內(nèi)存中鲁猩，當(dāng)使用完數(shù)據(jù)內(nèi)容時(shí)，要清除
代碼示例：-
從本地拖拽文件到頁面中
<!doctypehtml> <html> <head lang="en"> <meta charset="UTF-8"> <title>實(shí)現(xiàn)從本地拖放圖片到頁面中</title> <style> div { width : 500px; height: 500px; border: 1px solid black; padding: 10px; } </style> </head> <body> <!-- TODO 目標(biāo)元素 --> <div id="d1"></div> <script> var d1 = document.getElementById("d1"); d1.ondragover = function(event){ event.preventDefault(); } d1.ondrop = function(event){ var dataTrans = event.dataTransfer; //獲取到從本地拖拽進(jìn)來的文件 var files = dataTrans.files[0]; //創(chuàng)建文件讀取對(duì)象 var reader = new FileReader(); //讀取指定文件 reader.readAsDataURL(files); //讀取完以后岖沛，顯示圖片 reader.onload = function(){ d1.innerHTML = "<img src="+reader.result+">"; } //取消默認(rèn)事件 event.preventDefault(); } </script> </body> </html> -
實(shí)現(xiàn)左右拖拽
<!doctypehtml> <html> <head> <title></title> <script type="text/javascript"> </script> <style type="text/css"> #d1{ width: 300px; height: 400px; border:1px solid black; float: left; } #d2{ width: 300px; height: 400px; border:1px solid black; float: right; } </style> </head> <body> <div id="d1"> <img id= "myImage" src="class.jpg"/> </div> <div id="d2"></div> </body> <script type="text/javascript"> var myImage = document.getElementById("myImage"); var d1 = document.getElementById("d1"); var d2 = document.getElementById("d2"); //在源元素的開始拖拽事件中獲取到圖片的src myImage.ondragstart = function(evevt){ //獲取到DataTransfer對(duì)象 event.dataTransfer.setData("Text",myImage.src); } //目標(biāo)元素的ondrop事件中暑始，將要拖拽的信息放到目標(biāo)元素中 d1.ondrop = function(event){ var ImgSrc = event.dataTransfer.getData("Text"); d1.innerHTML = "<img src = "+ImgSrc+">"; //離開目標(biāo)元素后，將目標(biāo)元素移除 d2.ondragend = function(){ d2.innerHTML = ""; } } //組織頁面的默認(rèn)行為婴削，默認(rèn)是不允許拖放的廊镜，必須在ondragover里面組織 d1.ondragover = function(event){ event.preventDefault(); } d2.ondrop = function(event){ var ImgSrc = event.dataTransfer.getData("Text"); d2.innerHTML = "<img src="+ImgSrc+">"; d1.ondragend = function(){ d1.innerHTML = ""; } } d2.ondragover = function(event){ event.preventDefault(); } </script> </html>
