javascript - 拖放移除目标元素

Question

我觉得这应该很简单。我给它写了一个codepen，就是为了把问题说出来https://codepen.io/rubixKube/pen/yPXPzr .

我正在尝试删除父节点 (span)，而不删除我刚刚放入的东西。

只是想知道是否有人对如何执行此操作有更好的想法。

我已经在我的 onmouse 事件上试过了:

//capturing the elements in variables
var mytarget = event.target;
var mytargetsibling = event.target.previousElementSibling;

//next three lines are just how drag and drop works
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));

//trying to remove it AND then put the child back
this.parentNode.remove(this);
mytargetsibling.appendChild(mytarget);

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("text");
  ev.target.appendChild(document.getElementById(data));
}

.tags {
  padding: 6px;
}

.drop-area {
  border: 1px solid red;
}

.drag-this {
  background: blue;
  color: white;
}

<ul>
  <li>
    <span class="header tags">Apple</span>
    <span class="drop-area target-drop tags" ondrop="drop(event)" ondragover="allowDrop(event)">Drop HERE</span>
  </li>
</ul>
<ul>
  <li><span id="drag1" class="drag-this tags" draggable="true" ondragstart="drag(event)">Apple</span></li>
</ul>

Answer 1

我建议您不要使用 event.target.appendChild():event.target.parentNode.replaceChild(newElement, event.target)正如方法名称所暗示的那样，它将用新的子项 (newElement) 替换现有的子项 (event.target):

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("text"),

    // cached as a variable to simplify the later
    // code for readability:
    elToAdd = document.getElementById(data),

    // we're accessing this node twice, so caching it here:
    dropBefore = ev.target;

  // moving from the dropBefore node to its parentNode,
  // and calling the replaceChild() method to insert
  // 'elToAdd' in place of the existing 'dropBefore' node:
  dropBefore.parentNode.replaceChild(elToAdd, dropBefore);
}

.tags {
  padding: 6px;
}

.drop-area {
  border: 1px solid red;
}

.drag-this {
  background: blue;
  color: white;
}

<ul>
  <li>
    <span class="header tags">Apple</span>
    <span class="drop-area target-drop tags" ondrop="drop(event)" ondragover="allowDrop(event)">Drop HERE</span>
  </li>
</ul>
<ul>
  <li><span id="drag1" class="drag-this tags" draggable="true" ondragstart="drag(event)">Apple</span></li>
</ul>

或者，您可以使用 Node.replaceWith():

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("text"),

    // caching as variables to simplify the later
    // code for readability:
    elToAdd = document.getElementById(data),
    dropBefore = ev.target;

  // using childNode.replaceWith() to insert the 
  // elToAdd Node in place of the existing
  // dropBefore Node:
  dropBefore.replaceWith(elToAdd);
}

.tags {
  padding: 6px;
}

.drop-area {
  border: 1px solid red;
}

.drag-this {
  background: blue;
  color: white;
}

<ul>
  <li>
    <span class="header tags">Apple</span>
    <span class="drop-area target-drop tags" ondrop="drop(event)" ondragover="allowDrop(event)">Drop HERE</span>
  </li>
</ul>
<ul>
  <li><span id="drag1" class="drag-this tags" draggable="true" ondragstart="drag(event)">Apple</span></li>
</ul>

引用资料:

• > childNode.replaceWith() .
• > Node.replaceChild() .