使用jQuery進行兩個div的交換以及資料交換
阿新 • • 發佈：2020-09-08
老師上課講了對於兩個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>
當然，這個程式碼還是需要更加精簡。