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)，正如方法名所示，将替换现有的子（event.target）新孩子（newElement）：

＆＃13;

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);
}

＆＃13;

.tags {
  padding: 6px;
}

.drop-area {
  border: 1px solid red;
}

.drag-this {
  background: blue;
  color: white;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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);
}

＆＃13;

.tags {
  padding: 6px;
}

.drop-area {
  border: 1px solid red;
}

.drag-this {
  background: blue;
  color: white;
}

＆＃13;

<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>

＆＃13;

参考文献：

拖放删除目标元素

1 个答案: