老師上課講了對於兩個div進行交換的例子，只能交換一次，在課后，我進行了“兩個div可以交換多次”的研究
對於兩個div，一個紅色100px，一個藍色200px.使用拖拽功能可以進行交換
div樣式在style中，使用dragstart，dragover，drop進行綁定事件
dragstart事件的定義如下：
top.ondragstart=function(event)
{
var data=event.dataTransfer;
data.setData("id",this.id);
data.effectAllowed='link';
}
dragover事件定義如下：
bottom.ondragover=function(event)
{
event.preventDefault();
event.dataTransfer.dropEffect='';
}
drop事件定義如下：
bottom.ondrop=function(event)
{
var data=event.dataTransfer;
var id=data.getData("id");
var top=document.getElementById(id);
var topText=top.innerHTML;
var bottomText=this.innerHTML;
top.innerHTML=bottomText;
this.innerHTML=topText;
this.parentNode.replaceChild(this,top);
this.parentNode.appendChild(top);
}
注意需要拖拽top，bottom，需要添加屬性draggable="true"。
要將對象分清。
思路：使用datatransfer將id傳到drop中，然后進行交換。使用replaceChild（要替換的元素，替換元素），appendChild（）進行交換
完整代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 div#top{ 9 width: 100px; 10 height: 100px; 11 background-color: red; 12 } 13 div#bottom{ 14 width: 200px; 15 height: 200px; 16 background-color: blue; 17 } 18 div{ 19 margin:20px; 20 } 21 </style> 22 <script> 23 window.onload=function(event) 24 { 25 var top=document.getElementById("top"); 26 var bottom=document.getElementById("bottom"); 27 top.ondragstart=function(event) 28 { 29 var data=event.dataTransfer; 30 data.setData("id",this.id); 31 32 33 data.effectAllowed='link'; 34 35 } 36 bottom.ondragover=function(event) 37 { 38 event.preventDefault(); 39 event.dataTransfer.dropEffect=''; 40 41 } 42 bottom.ondrop=function(event) 43 { 44 var data=event.dataTransfer; 45 var id=data.getData("id"); 46 var top=document.getElementById(id); 47 var topText=top.innerHTML; 48 var bottomText=this.innerHTML; 49 50 51 top.innerHTML=bottomText; 52 this.innerHTML=topText; 53 this.parentNode.replaceChild(this,top); 54 this.parentNode.appendChild(top); 55 } 56 57 58 bottom.ondragstart=function(event) 59 { 60 var data=event.dataTransfer; 61 data.setData("id",this.id); 62 63 64 data.effectAllowed='link'; 65 66 } 67 top.ondragover=function(event) 68 { 69 event.preventDefault(); 70 event.dataTransfer.dropEffect=''; 71 72 } 73 top.ondrop=function(event) 74 { 75 var data=event.dataTransfer; 76 var id=data.getData("id"); 77 var top=document.getElementById(id); 78 var topText=top.innerHTML; 79 var bottomText=this.innerHTML; 80 81 82 top.innerHTML=bottomText; 83 this.innerHTML=topText; 84 this.parentNode.replaceChild(this,top); 85 this.parentNode.appendChild(top); 86 } 87 88 } 89 </script> 90 </head> 91 <body> 92 <div id="top" draggable="true"> 93 <h1>hello</h1> 94 </div> 95 <div id="bottom" draggable="true"> 96 <h3>world</h3> 97 </div> 98 </body> 99 </html>
當然，這個代碼還是需要更加精簡。