<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 80px; } #fir{background-color: blue; } #sec{background-color: black;} #thr{background-color: chartreuse;} #d_img{width: 200px;height: 80px;} </style> <script type="text/javascript"> var cont=0; var in_moving=0; /**--01--*/ function f_ondragstart(e){ document.getElementById("sp_start").innerHTML= e.target.id+":被拖元素，開始被拖動"; //被拖動，就將拖動的元素，存入（setData）dataTransfer里面：鍵值對 e.dataTransfer.setData("who", e.target.id); //--04--設置拖放過程中允許的效果（ondragstart中設置） e.effectAllowed="all"; } function f_ondrag(e){ cont++; document.getElementById("sp_moving").innerHTML= e.target.id+":被拖元素，被拖動過程中:"+cont; } function f_ondragenter(e){ document.getElementById("sp_in").innerHTML= "進入:"+e.target.id; } /**--02--*/ function f_ondragover(e){ //進入，就設置可以拖放進來（設置不執行默認：【默認的是不可以拖動進來】） e.preventDefault(); //--05--設置具體效果 e.dataTransfer.dropEffect="copy"; document.getElementById("sp_in_moving").innerHTML="進入:"+ e.target.id+":"+in_moving; } function f_ondragleave(e){ document.getElementById("sp_leave").innerHTML="離開:"+ e.target.id } /**--03--*/ function f_ondrop(e){ // document.getElementById("sp_on").innerHTML="到達目標:"+ e.target.id;/**/ //設置不執行默認：【默認的是不可以拖動進來】 e.preventDefault(); var who= e.dataTransfer.getData("who"); //添加子節點 document.getElementById(e.target.id).appendChild(document.getElementById(who)); document.getElementById("sp_on").innerHTML=who+":到達目標:"+ e.target.id; } function f_ondragend(e){ document.getElementById("sp_end").innerHTML="結束拖放:"+ e.target.id; } </script> </head> <body> <!--拖放： 拖動的對象，需要設置draggable屬性為true(draggable="true"), a元素需要href，img元素需要src。 1、被拖對象：dragstart事件，被拖動的元素，開始拖放觸發 2、被拖對象：drag事件，被拖放的元素，拖放過程中 3、經過對象：dragenter事件，拖放過程中鼠標經過的元素，被拖放的元素“開始”進入其它元素范圍內（剛進入） 4、經過對象：dragover事件，拖放過程中鼠標經過的元素，被拖放的元素正在本元素范圍內移動(一直) 5、經過對象：dragleave事件，拖放過程中鼠標經過的元素，被拖放的元素離開本元素范圍 6、目標地點：drop事件，拖放的目標元素，其他元素被拖放到本元素中 7、被拖對象：dragend事件，拖放的對象元素，拖放操作結束 --> </body> <div id="fir" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)"> </div> <div id="sec" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)"> </div> <div id="thr" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)"> </div> <br> <img id="d_img" src="imgs/img.jpg" draggable="true" ondragstart="f_ondragstart(event)" ondrag="f_ondrag(event)" ondragend="f_ondragend(event)"> <br> <span id="sp_start"></span> <br> <span id="sp_moving"></span> <br> <span id="sp_in"></span> <br> <span id="sp_in_moving"></span> <br> <span id="sp_leave"></span> <br> <span id="sp_on"></span> <br> <span id="sp_end"></span> </html>