Question

问题就在这里当我拖动这个拖到lokesh.exe到Lokesh.exe我得到源id：2但是destinationid为null。当我将我拖入框中时，它会提供正确的结果，例如源ID和目标ID。我试过下面的代码：

//html

<a draggable="true" ondragstart="drag(event)" id="drag-id" >drag-me</a>
<table>
    <tr><td id="div1" style=" border: solid 1px; width:100px; height:100px;"  ondrop="return drop(event)" ondragover="allowDrop(event)"></td></tr>
</table>
<table align="center" class="tabelhead" style="border-collapse: collapse;">


    <tr id="1" align="center" ondragover="allowDrop(event)" ondrop="return drop(event)" class="targetdiv"  draggable="true" ondragstart="drag(event)">
        <td width="500" align="left">Lokesh.exe</td>
    </tr>

    <tr id="2" align="center" ondragover="allowDrop(event)" ondrop="return drop(event)" class="targetdiv"  draggable="true" ondragstart="drag(event)">
        <td width="500" align="left">Drag this to lokesh.exe</td>
    </tr>
</table>

//javascript



function drag(ev)
{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)
{
    ev.preventDefault();
    //console.log(ev.dataTransfer);
    var data=ev.dataTransfer.getData("Text");
    //ev.target.appendChild(document.getElementById(data));
    var sourceid=document.getElementById(data).id;
    alert("source id:"+sourceid);
    var destinationid=ev.target.id;
    alert("destinationid:"+destinationid);
} 

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

}

Answer 1

问题是您希望e.target成为<tr>，但事件的目标实际上是<td>，而id没有console.log(ev.target); } attribute。

我已更新您的JS小提琴http://jsfiddle.net/ZsjA3/2/并添加了一个控制台输出来演示正在发生的事情：

<td>

确保调试器的控制台在运行时处于打开状态。我认为您最好的选择是将ID移至{{1}}。

Answer 2

如果你想要目标tr id，那么就这样做。

var targetTR = ev.target.parentElement;
var targetId = targetTR.id;

拖放html元素

2 个答案: