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);
}
})
}

使用HTML5拖放内容切换

1 个答案: