1

我有拖放代码，我需要在拖放中切换内容。目前，当您将 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;
}
4

1 回答 1

0

您可以更改表中 tr 的 drop 函数使用类，例如 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);
}
})
}
于 2013-08-08T05:30:28.327 回答