javascript - Drag and Drop not dropping

Question

I am a trying to use JS to drag an drop nodes on a family tree. However, the nodes will drag, but will not drop where they are placed. They return to their orginal position.

I am not sure if I am defining the area where they can be dropped correctly. The JS code is:

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

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

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

I then inserted a DIV within a HTML section to allow the drop:

  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Then the HTML code to allow elements to be dragged:

<a  title="No Info "draggable="true" ondragstart="drag(event)" href="DiggaDiary1.html" id="shadow" href="#">++ Annie Johnson 1781-(Tuam)</a>
            <ul>

Thanks Ciaran

Answer 1

您的代码是正确的，但是您在 dragstart 中设置了“text”而不是“img”，因此如下所示：

var data = ev.dataTransfer.getData('Text');

这是jsfiddle。

编辑 ：

你也可以让它变得更容易，如下所示：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.srcElement;
    ev.target.appendChild(data);
} 

Answer 2

明白了，谢谢帮忙，element.parentNode.removeElement(element); 加上 newParent.appendChild(element) 工作