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

146

安德烈斯533

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

我在用着

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>

安德烈斯533

好的，我让它工作了，多亏了这个链接：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-10

我来说两句

0 条评论

登录后参与评论

下一篇：使用 JavaScript 将多行数据粘贴到单个单元格中

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

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

IE 11中的FormData未定义

如何一次从多个文本框中获取值？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

OpenCv：改变 putText() 的位置

Redux动作正常，但减速器无效

如何从JavaScript中的MP3文件读取元数据属性？

如何使用Redux-Toolkit重置Redux Store

将加号/减号添加到jQuery菜单

OpenGL纹理格式的颜色错误

获取并汇总所有关联的数据

超过时间限制错误C ++

ActiveModelSerializer仅显示关联的ID

在交互式Python Shell中获得最后结果

如何开始为Ubuntu开发

去噪自动编码器和常规自动编码器有什么区别？

Excel 2016图表将增长与4个参数进行比较

算术中的c ++常量类型转换

使用因子时如何在y轴上的ggplot中插入count或％

TreeMap中的自定义排序

如何在R中转置数据

在 React Native Expo 中使用 react-redux 更改另一个键的值