перетаскивание системного перекрывающегося элемента div

Question

перетаскивание системного перекрывающегося элемента div

1

попробуйте сбросить серые прямоугольники внутри любого столбца, если вы потеряете слишком много внутри столбца, поля будут перекрываться друг с другом. Как я могу сделать валидацию, чтобы это не произошло? Я хочу, чтобы каждый ящик находился под каждым другим с разрывом X px от eachother.

Ниже приведен не весь код для этих полей. если вы хотите увидеть полный исходный код, пожалуйста, используйте веб-сайт.

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

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

    <div class="collumnContent" id="c1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p>Customer 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 code" style="visibility: hidden">
            <br>
            <input id="txt2" placeholder="Customer size" style="visibility: hidden">
            <br>
            <input id="txt3" placeholder="Customer 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>

rahul mr 24 окт. 2017, в 10:55

Источник

Теги:

javascript

css

1 ответ

Ещё вопросы

rahul mr · Accepted Answer · 2017-10-24T08-02-00.000Z

Я изменил код 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);
}

Добавление опции для элемента в качестве второго параметра. Затем используйте переданный элемент в качестве добавляемого элемента.

Полный фрагмент ниже

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

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

    <div class="collumnContent" id="c1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p>Customer 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 code" style="visibility: hidden">
            <br>
            <input id="txt2" placeholder="Customer size" style="visibility: hidden">
            <br>
            <input id="txt3" placeholder="Customer 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>

вам нужно передать текущую область, для этого вам нужно передать «это»
Теперь я получаю новую ошибку, которая, я думаю, связана с передачей параметра this. удаление многих полей в столбце в конечном итоге приведет к превращению одного из столбцов в перетаскиваемый дочерний элемент. Посмотри! 2much.online опустите несколько ящиков вокруг, и вы получите сообщение об ошибке, при котором вы можете перетащить один из столбцов при попытке перетащить поле, в которое будет поставлен столбец.
Неважно, я думаю, что нашел проблему! :)