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

Posted 2023-05-08

【中文标题】如何将节点从一列div拖到另一列

【英文标题】：How to drag a node from one column div to another

【发布时间】：2020-07-26 11:41:52

【问题描述】：

我已尽力寻找有类似问题的人，虽然他们在外面，但与我需要做的不符。因此，我无法通过阅读他们的答案来解决我的问题。过去 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.

【参考方案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>

【讨论】：

谢谢！你是救生员。在我测试它之前我正在阅读它，我认为它不会按照我想要的方式工作。在我看来，您必须从一个节点中删除节点，然后将其添加到另一个节点。我很困惑为什么它有效，但它有效！谢谢：D

之所以有效，是因为 appendChild 将元素移动到新容器中，而不仅仅是复制它。，结帐developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

所以我发现了一个很容易修复的错误，只是想发布它以防将来有人偶然发现它。您的示例允许您将“obj”拖到另一个“obj”上。修复是在 drop 时检查 ev 的元素，超级简单。再次感谢！