主要是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() 方法設置被拖數據的數據類型和值。
-----請參考w3cschool：html5拖放
---------------------------------------------------------------------阿紀----------------------------------------------------------------------