JS實現div塊的拖放，調換位置
阿新 • • 發佈：2018-12-30
主要是HTML5 的拖放（Drag 和 Drop）
例子（不需要對div設定ID）：
<!DOCTYPE HTML> <html> <head> <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> </head> <body> <div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> div1! </div> <div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> div2! </div> <div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> div3 </div> </body> </html>
上面函式介紹：
- ondrop: 當放置被拖資料時，會發生 drop 事件，這裡自定義drop(event,this)函式,互換兩個的innerHTML
- ondragover:當拖動連結等有預設事件的元素時，要在ondragover事件中用ev.preventDefault()阻止預設事件。否則drop事件不會觸發。
- draggable:允許拖動。
- ondragstart:規定當元素被拖動時，會發生什麼。在上面的例子中，ondragstart 屬性呼叫了一個函式，drag(event)，它規定了被拖動的資料。dataTransfer.setData() 方法設定被拖資料的資料型別和值。