drag and drop system overlapping dropped divs element

Question

try dropping the grey boxes inside any column if you drop too many inside on column, the boxes will end up overlapping with eachother. How can I do a validation to stop this from happening? I want each box to be underneath eachother with a X px gap from eachother.

Below is not the entire code for those boxes. if you would like to see the full source code please use the website.

 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

I changed the HTML code to this:

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

Passing this as the second parameter to the drop function.

Then change the JavaScript to the following:

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

Adding the option for an element as the second parameter. Then use the passed element as the element to be appended.

---

Full snippet below

 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>