高級打字工!!!

由於工作需要用到此功能~

而且先前看書有看過~~

所以就拿來實做囉

網路上使用table中的tr元素來實做的範例挺少

所以以table來做為這次的對象

以下為HTML語法內容 

關鍵:要拖曳的元素需設定draggable為true

需在容器元素的部分會使用到ondrop、ondragover兩個事件

拖曳元素會使用到ondragstart事件,用來記錄拖曳的元素id

<table border="1" id="table1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:100px; height:100px">
    <tr style="height:20px" id="seq-header">>
        <td>標題</td>
        <td>內容</td>
    </tr>
    <tr id="seq-1" draggable="true" ondragstart="drag(event);">
        <td>test2</td>
        <td>2222</td>
    </tr>
</table>
<br />

<table border="1" id="table2" ondrop="drop(event)" ondragover="allowDrop(event)" >
    <tr id="down-header">
        <td>標題</td>
        <td>內容</td>
    </tr>
    <tr draggable="true" id="tr1" ondragstart="drag(event);">
        <td>test1</td>
        <td>11111</td>
    </tr>
</table>

畫面如下

 

javascript語法如下

  function allowDrop(ev) {
        //取消預設的功能
        ev.preventDefault();
    }

    function drag(ev) {
        //將拖移的元素id記錄起來 key:Text
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        //取消預設的功能
        ev.preventDefault();
        //取得拖移的元素id
        var data = ev.dataTransfer.getData("Text");
        //將拖移的元素放置另一個table
        ev.currentTarget.appendChild(document.getElementById(data));
        
    }

結果如下