代碼是這樣滴
<!DOCTYPE HTML><html><head> <style type="text/css"> .divClass { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid #aaaaaa; } </style></head><body><div class="divClass" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> <p>Ali</p></div><div class="divClass" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> <p>Tencent</p></div><script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } var srcdiv = null; function drag(ev, divdom) { srcdiv = divdom; ev.dataTransfer.setData("text/html", divdom.innerHTML); } function drop(ev, divdom) { ev.preventDefault(); if (srcdiv != divdom) { srcdiv.innerHTML = divdom.innerHTML; divdom.innerHTML = ev.dataTransfer.getData("text/html"); } }</script></body></html>
簡單解釋下函數 ondrop: 拖到目的地放下之後要做的處理，這裡自訂drop(event,this)函數,互換兩個的innerHTML ondragover:當拖動連結等有預設事件的元素時，要在ondragover事件中用ev.preventDefault()阻止預設事件。否則drop事件不會觸發。 draggable:允許拖動 ondragstart:選取拖動目標要做的處理，這裡儲存拖動目標的innerHTML.Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
