使用HTML5拖放內容切換

Question

我有拖放代碼，需要在拖放中切換內容。 當前，當您在另一個tr上放置一個tr時，會追加此新tr，但是我希望這兩個tr可以更改其位置而不是追加它。 我對任何插件都不感興趣，而且如果可以使用jquery完成，它將為gr8。 HTML代碼：

<table>
    <tr>
        <td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
            Some Dummy Text1
        </td>
    </tr>
    <tr>
        <td  id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
            Some Dummy Text2        
        </td>
    </tr>
    <tr>
        <td  id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
            Some Dummy Text3        
        </td>
    </tr>
    <tr>
        <td  id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
            Some Dummy Text4        
        </td>
    </tr>
</table>

Javascript：

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//alert("Id "+ev.target.id+" Being drag");
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

CSS：

td
{
    width:500px;
    height:80px;
    border:1px solid #000;
    margin-bottom:5px;
    padding:8px;
    cursor:default;
}

Answer 1

您可以在表中更改tr的放置函數使用類，例如class =“ trDrop”

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var obj=document.getElementById(data);
var dropPosX=ev.ClientX;
var dropPosY=ev.ClientY;
$("table").find('.trDrop').each(function(){
var tableTr=$(this);
var posX=tableTr.offset().left;
var posY=tableTr.offset().top;
var width=posX+tableTr.width;
var height=posY+tableTr.height;
// Now the main trick
if(dragPosX>posX && dragPosX<width && dragPosY>posY && dragPosY<height)
{
obj.InsertAfter(tableTr);
}
})
}