拖放系统重叠丢弃的divs元素

Question

尝试将灰色框放在任何列内，如果你在列上放下太多内容，那么这些框最终会相互重叠。如何进行验证以阻止这种情况发生？我希望每个盒子都在彼此之下，彼此间隔X px。

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

＆＃13;

＆＃13;

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();
}

＆＃13;

.collumnContent {
    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;
}

＆＃13;

    <div class="collumnContent" 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="collumnContent" id="c2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>Planned</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我将HTML代码更改为：

<div class="collumnContent" 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);
}

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

下面的完整摘录

＆＃13;

＆＃13;

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();
}

＆＃13;

.collumnContent {
    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;
}

＆＃13;

    <div class="collumnContent" 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="collumnContent" id="c2" ondrop="drop(event, this)" ondragover="allowDrop(event)">
    <p>Planned</p>
</div>

＆＃13;

＆＃13;

＆＃13;