Question

我有一个拖放系统，你可以将几个盒子放到这个放置区域，我想组织每个放置，以便每个放下的盒子在一条垂直的直线下面，在每个盒子之间有一个间隙其他。

目前，如果我在这个放置区域内拖放多个盒子，它们会相互重叠，一切看起来都非常混乱。我希望每当一个盒子掉落而不管放置区域中的哪个位置时，默认情况下它都将位于前一个盒子的下方。

注意拖放不适用于小提琴：

掉落区域：

function dragInfo(event) {
  event.dataTransfer.setData("Info", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Info");
  var copyData = document.getElementById(data).cloneNode(true);
  copyData.id = "newId";
  event.target.appendChild(copyData);
}

function drag_drop(event) {
  event.preventDefault();
}

.collumnContent {
  padding-top: 5px;
  width: 129px;
  height: 840px;
  text-align: center;
  margin: 3px;
  overflow: auto;
  border-radius: 20px;
}

.dropBox {
  display: inline-block;
  position: relative;
  margin-top: 40px;
  height: 140px;
  width: 120px;
  border: 2px dashed;
  background-color: lightgray;
}

<div class="collumnContent" id="c1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p>Customer's order</p>

</div>


<div class="dropBox" ondragover="allowDrop(event)" ondragstart="dragInfo(event)" id="dp1" draggable="true">
  <p id="para1">Drag file here</p>
  <div class="leftAlign">
    <img src="pdf.jpg" id="pdfImg" style="visibility: hidden">
    <p1 id="pdfInfo"></p1><br>
  </div>
  <input id="txt1" placeholder="Customer's code" style="visibility: hidden"><br>
  <input id="txt2" placeholder="Customer's size" style="visibility: hidden"><br>
  <input id="txt3" placeholder="Customer's DD" style="visibility: hidden"><br>
  <button id="btn" style="visibility: hidden">Save</button>
</div>

在拖放区内拖拽和下垂时，使所有盒子垂直和垂直

0 个答案: