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

Question

我已尽力寻找有类似问题的人，虽然他们在外面，但与我需要做的不符。因此，我无法通过阅读他们的答案来解决我的问题。过去 5 个小时的后半部分，我一直在做这件事，我想出了很多我需要做的事情，但我最终遇到了一个我无法弄清楚或解决的问题。

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

Here 是一个指向 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>