如何将节点从一列div拖动到另一列div

Question

我已经尽了最大努力寻找有类似问题的人，虽然他们在那里，但他们与我需要做的不匹配。因此，我无法通过阅读他们的答案来解决我的问题。在过去的5个小时里，我花了后半段时间来研究这个问题，我想清楚了我需要做的很多事情，但我最终遇到了一个我无法解决的问题。

用例是，我将动态地构建一个"列"。我希望能够将一个项目从A列拖到B列(反之亦然(。一旦一个项目被拖到另一列，它就应该从原始列中删除。

这里有一个链接到一个JSFiddle页面，里面有我正在测试的代码。因为它现在很好，只运行了一次。当我第二次尝试使用它时，什么也没发生。我能说的最好的一点是"handleDragStart"事件侦听器没有第二次启动；因此，当从ASP.Net Web表单加载时，当我尝试移动第二个项目时，浏览器客户端中出现以下错误：Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.

Answer 1

看看，我只发布了所需的代码

function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var elementId = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(elementId));
}

.column {
width: 75px;
min-height: 50px;
background-color: #6772E5;
color: #FFF;
padding: 8px 12px;
border: 0;
border-radius: 4px;
font-size: 1em;
}

<div id="columns" style="width: 240px;">
<div id="columna" class="column" style="float:left;" ondrop="drop(event)" ondragover="allowDrop(event)">
<header>Unlocked</header>
<div class="obj" draggable="true" id="a" ondragstart="drag(event)">A</div>
<div class="obj" draggable="true" id="b" ondragstart="drag(event)">B</div>
</div>
<div id="columnb" class="column" style="float:right;" ondragover="allowDrop(event)" ondrop="drop(event)">
<header>Locked</header>
<div class="obj" draggable="true" id="c" ondragstart="drag(event)">C</div>
<div class="obj" draggable="true" id="d" ondragstart="drag(event)">D</div>
</div>
</div>

注意：我已经为每个节点添加了一个id，如果你不喜欢使用id，你可以这样做

var draggedElement;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
draggedElement = ev.target;
}
function drop(ev) {
ev.preventDefault();
ev.target.appendChild(draggedElement);
}

.column {
width: 75px;
background-color: #6772E5;
color: #FFF;
padding: 8px 12px;
border: 0;
border-radius: 4px;
font-size: 1em;
}

<div id="columns" style="width: 240px;">
<div id="columna" class="column" style="float:left;" ondrop="drop(event)" ondragover="allowDrop(event)">
<header>Unlocked</header>
<div class="obj" draggable="true" ondragstart="drag(event)">A</div>
<div class="obj" draggable="true" ondragstart="drag(event)">B</div>
</div>
<div id="columnb" class="column" style="float:right;" ondragover="allowDrop(event)" ondrop="drop(event)">
<header>Locked</header>
<div class="obj" draggable="true" ondragstart="drag(event)">C</div>
<div class="obj" draggable="true" ondragstart="drag(event)">D</div>
</div>
</div>