堆栈内存溢出
  简体   繁体   English

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

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

 原文  2020-06-11 13:27:57  3   2    javascript/ html/ drag-and-drop

问题描述

I use the below code to drag items (left) to the drop items (right).我使用下面的代码将项目（左）拖动到放置项目（右）。 Once dragged to the right, they can be dragged back to the left.一旦被拖到右边，它们就可以被拖回左边。

I'm using我在用着

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

to drag them back, so they always are added as the last div.将它们拖回来，所以它们总是被添加为最后一个 div。

Is there any way to drag the item to the left, positioned between other divs that are already in the left?有没有办法将项目拖动到左侧，位于左侧已经存在的其他 div 之间？ instead of always added to the end?而不是总是添加到最后？

Also this would allow to sort the items in the left by just dragging them between them, is this easy without using jquery?这也将允许通过在它们之间拖动它们来对左侧的项目进行排序，这是否容易而不使用 jquery？ thanks!谢谢！

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

2 个解决方案

解决方案1
 1  2020-06-11 13:59:04

You can use the ChildNode.before() method to insert your element right before any other target:您可以使用 ChildNode.before() 方法在任何其他目标之前插入您的元素：

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

Also, this assignment you have in the condition check looks like it's a mistake:此外，您在条件检查中的这项分配看起来像是一个错误：

else if (dropClass = "dropItems") {

解决方案2
 1 已采纳  2020-06-11 17:54:39

OK I got it working, thanks to this link:好的，我让它工作了，感谢这个链接：

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

This is the code:这是代码：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何通过Javascript在两个div之间添加一个div - How to add a div between two divs by Javascript 如何根据ID使用Jquery在两个Div之间添加Div？ - How to Append a Div in-between two Divs based on their ID's using Jquery? 如何仅使用javascript在其他两个div之间添加一个div内容块？ - How to add a block of div contents in between two other divs using javascript only? jQuery在两个不同的div之间放置div - jQuery place div in between two different divs 在div之间切换div类（jquery，javascript） - switching div class between divs (jquery, javascript) 如何使用CSS / Javascript根据窗口高度使div在两个div之间自动调整其高度？ - How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript? 如何在不同Div之间使用jquery进行拖放 - How to drag and drop using jquery between different Div 使用jQuery查找两个DIV之间的距离？ - Find distance between two DIVs using jQuery? 如何使用jQuery / Javascript为鼠标悬停上的div带来阴影效果 - How to bring drop shadow effect for a div on mouseover using jQuery / Javascript 在两个div之间插入纯文本 - Insert plain text between two divs
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM