如何使用普通 JavaScript（无 JQuery）在两个 div 之间删除 div

Question

我使用下面的代码将项目（左）拖动到放置项目（右）。向右拖动后，可以向左拖动。

我正在使用

document.getElementById(dropID).appendChild(document.getElementById(dragID))

将它们拖回原位，因此它们总是添加到最后 div。

有没有办法将项目向左拖动，使其位于左侧已有的其他 div 之间？而不是总是添加到末尾？

此外，这将允许通过在它们之间拖动它们来对左侧的项目进行排序，这很容易而不使用 jquery 吗？谢谢！

<!DOCTYPE HTML>
<html>
<head>
<style>

.dragAndDropContainer {
  display: flex ;
  justify-content: space-around;
  font-family: Helvetica,Arial,Lucida,sans-serif ; 
}

.dragItems {
  display: flex ;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  flex-grow: 1;
  border: 1px solid black;
}  

.dragItem {
  margin: 10px;
  padding: 10px;
  border: 1px solid white;
  background-color: rgb(52,118,177);
  color: white;
  font-weight: bold;
}

.dragItem:hover {
  background: rgb(117, 168, 255);
}

.dropItems {
  display: flex ;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  flex-grow: 1;
} 

 .dropItem {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(160, 160, 160);
  background-color: rgb(190, 190, 190);
  color: black;
  font-weight: bold;
}

.dropItem:hover {
  color: white;
  background: rgb(73, 86, 92);
}

</style>
<script>

  // source based on: https://www.w3schools.com/html/html5_draganddrop.asp

function allowDrop(ev) {
  var dropID =  ev.currentTarget.id;
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("dragEventID", ev.currentTarget.id);
}

function drop(ev) {
  ev.preventDefault();
  var dragID = ev.dataTransfer.getData("dragEventID");
  var dropID =  ev.currentTarget.id;
  var dropClass =  ev.currentTarget.getAttribute("class");
  var maximumDragItemsPerDropArea = 1 ;

  if (dropClass=="dragItems") {
    document.getElementById(dropID).appendChild(document.getElementById(dragID));
  }  
  else if (dropClass = "dropItems") {
    if (document.getElementById(dropID).childElementCount < maximumDragItemsPerDropArea) {
      document.getElementById(dropID).appendChild(document.getElementById(dragID));
    } else {
      console.log("maximum "+ maximumDragItemsPerDropArea) ;
      console.log(document.getElementById(dropID).children) ;
      // alert("max");
    }
  }
}
</script>
</head>
<body>

<div id="dragAndDropContainer" class="dragAndDropContainer">

<div id="dragItems" class="dragItems" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">
  <div id="dmDragItemID1" class="dragItem" draggable="true" ondragstart="drag(event)" > Drag item 1 </div>
<div id="dmDragItemID2" class="dragItem" draggable="true" ondragstart="drag(event)" > Drag item 2 </div>
<div id="dmDragItemID3" class="dragItem" draggable="true" ondragstart="drag(event)" > Drag item 3 </div>
</div>

<div id="dropItems" class="dropItems">
  <div id="dmDropItemID1" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Drop item 1</div>
<div id="dmDropItemID2" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Drop item 2</div>
<div id="dmDropItemID3" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Drop item 3</div>
<div id="dmDropItemID4" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Drop item 4</div>
</div>

</div>

</body>
</html>

Answer 1

您可以使用 ChildNode.before() 方法在任何其他目标之前插入您的元素：

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before

此外，您在条件检查中的这项分配看起来是个错误：

else if (dropClass = "dropItems") {

Answer 2

好的，多亏了这个 link:

https://codepen.io/fitri/pen/VbrZQm

这是代码：

<html>
<head>
<style>

.dragAndDropContainer {
  display: flex ;
  justify-content: space-around;
  font-family: Helvetica,Arial,Lucida,sans-serif ; 
  font-size: 11px;
}

.dragItems {
  display: flex ;
  flex-direction: column;
  text-align: center;
  flex-grow: 1;
  border: 1px solid rgb(160, 160, 160);
}  

.dragItem {
  margin: 0px;
  padding: 5px;
  border: 1px solid white;
  background-color: rgb(52,118,177);
  color: white;
}

.dragItem:hover {
  background: rgb(117, 168, 255);
}

.dropItems {
  display: flex ;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  flex-grow: 1;
} 

 .dropItem {
  margin: 0px;
  padding: 5px;
  border: 1px solid white;
  background-color: rgb(190, 190, 190);
  color: black;
  font-weight: bold;
}

.dropItem:hover {
  color: white;
  background: rgb(73, 86, 92);
}

</style>
<script>
/* 

Resources:
https://www.w3schools.com/html/html5_draganddrop.asp
https://codepen.io/fitri/pen/VbrZQm

*/

function allowDrop(ev) {
  var dropID =  ev.currentTarget.id;
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("dragEventID", ev.currentTarget.id);
}

function drop(ev) {
  ev.preventDefault();
  var dragID = ev.dataTransfer.getData("dragEventID");
  var dropID =  ev.currentTarget.id;
  var dropClass =  ev.currentTarget.getAttribute("class");
  var maximumDragItemsPerDropArea = 1 ;

if (dropClass == "dragItems") {

    elementDropPoint = document.elementFromPoint(event.clientX, event.clientY);
    // If drop area is the drag items container div, we add the dragged div to the end
    if (elementDropPoint.className == "dragItems") {
        document.getElementById(dropID).appendChild(document.getElementById(dragID));
    }
    // If drop area is between two drag item divs, we add the dragged div in the drop area, after the existing drag div
    if (elementDropPoint.className == "dragItem") {
      elementDropPoint.after(document.getElementById(dragID));
    }
  }

  if (dropClass == "dropItem") {
    if (document.getElementById(dropID).childElementCount < maximumDragItemsPerDropArea) {
      document.getElementById(dropID).appendChild(document.getElementById(dragID));
    } else {
      console.log("maximum "+ maximumDragItemsPerDropArea) ;
      console.log(document.getElementById(dropID).children) ;
      // alert("max");
    }
  }
}

</script>
</head>
<body>

<div id="dragAndDropContainer" class="dragAndDropContainer">


<div id="dragItems" class="dragItems" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">
  <div id="dmDragItemID1" class="dragItem" draggable="true" ondragstart="drag(event)" > FileNotes021.png </div>
<div id="dmDragItemID2" class="dragItem" draggable="true" ondragstart="drag(event)" > FileNotes025.png </div>
<div id="dmDragItemID3" class="dragItem" draggable="true" ondragstart="drag(event)" > FileNotes019.png </div>
<div id="dmDragItemID4" class="dragItem" draggable="true" ondragstart="drag(event)" > FileNotes015.png </div>
</div>

<div id="dropItems" class="dropItems">
  <div id="dmDropItemID1" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Song 1</div>
<div id="dmDropItemID2" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Song 2</div>
<div id="dmDropItemID3" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Song 3</div>
<div id="dmDropItemID4" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Song 4</div>
<div id="dmDropItemID5" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Song 5</div>
<div id="dmDropItemID6" class="dropItem" ondrop="drop(event)" draggable="false" ondragover="allowDrop(event)">Song 6</div>
</div>

</div>

</body>
</html>

如何使用普通 JavaScript（无 JQuery）在两个 div 之间删除 div

How to drop a div between two divs using plain JavaScript (no JQuery)

html

javascript

drag-and-drop