我使用下面的代码拖动项目（左）到拖放项目（右）。 一旦被拖到右边，它们就可以被拖回到左边。
我在用
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>
您可以使用ChildNode.before（）方法在任何其他目标之前插入您的元素:
https://developer.mozilla.org/en-us/docs/web/api/childnode/before
此外，您在条件检查中的分配看起来是个错误:
else if（dropClass=“dropitems”）{
