javascript - 拖放系统重叠掉落的 div 元素

Question

尝试将灰色框放在任何列中，如果您在列中放置太多，这些框最终会相互重叠。我如何进行验证以阻止这种情况发生？我希望每个盒子都在彼此的下方，彼此之间有 X 像素的间隙。

下面不是这些框的完整代码。如果您想查看完整的源代码，请使用该网站。

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");
    event.target.appendChild(document.getElementById(data));
    console.log(data);
}

function drag_drop(event) {
    event.preventDefault();
}

.columnContent {
    padding-top: 5px;
    width: 129px;
    height: auto;
    text-align: center;
    margin: 3px;
    border-radius: 20px;
    flex-direction: column;
}


.dropBox {
    display: inline-block;
    position: relative;
    height: 140px;
    width: 120px;
    border: 2px dashed;
    background-color: lightgray;
    cursor: move;
    box-sizing: border-box;
    z-index: 1;
}

    <div class="columnContent" id="c1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p>Customer's order</p>
        <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>
</div>
<div class="columnContent" id="c2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>Planned</p>
</div>

Answer 1

我将 HTML 代码更改为:

<div class="columnContent" id="c2" ondrop="drop(event, this)" ondragover="allowDrop(event)">
    <p>Planned</p>
</div>

将 this 作为第二个参数传递给 drop 函数。

然后将 JavaScript 更改为以下内容:

function drop(event, el) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Info");
    el.appendChild(document.getElementById(data));
    console.log(data);
}

为元素添加选项作为第二个参数。然后使用传递的元素作为要追加的元素。

---

下面是完整的片段

function dragInfo(event) {
    event.dataTransfer.setData("Info", event.target.id);
}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event, el) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Info");
    el.appendChild(document.getElementById(data));
    console.log(data);
}

function drag_drop(event) {
    event.preventDefault();
}

.columnContent {
    padding-top: 5px;
    width: 129px;
    height: auto;
    text-align: center;
    margin: 3px;
    border-radius: 20px;
    flex-direction: column;
}

.dropBox {
    display: inline-block;
    position: relative;
    height: 140px;
    width: 120px;
    border: 2px dashed;
    background-color: lightgray;
    cursor: move;
    box-sizing: border-box;
    z-index: 1;
}

    <div class="columnContent" id="c1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p>Customer's order</p>
        <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>
</div>
<div class="columnContent" id="c2" ondrop="drop(event, this)" ondragover="allowDrop(event)">
    <p>Planned</p>
</div>