拖放“刪除的項目”

Question

我正在嘗試拖放一些項目。 我可以將一個div拖到拖放區div上，並且效果很好。 但是，當我拖動另一個div時，實際上可以將其放到先前放置的div中。 我不想這樣。 我希望放置區域是可以接受放置div的唯一位置。

    <div class='container-fluid'>
        <div class='row'>
            <div class='col-sm-12' style='padding:0px;'>
                <div class='col-sm-6'>
                    <div class='row'>
                        <div class='col-sm-2 drag-example' id='drag-1' 
                            draggable='true' ondragstart='drag(event)'></div>
                        <div class='col-sm-2 drag-example' id='drag-2' 
                            draggable='true' ondragstart='drag(event)'></div>
                        <div class='col-sm-2 drag-example' id='drag-3' 
                            draggable='true' ondragstart='drag(event)'></div>
                    </div>
                </div>
                <div class='col-sm-6'>
                    <div class='row'>
                        <div class='col-sm-10 drop-example' 
                            ondrop='drop(event)' ondragover='allowDrop(event)' 
                                id='drop-div'></div>
                        </div>
                   </div>
                </div>
        </div>
    </div>


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

function drag(ev){
    ev.dataTransfer.setData('text', ev.target.id);
}

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData('text');
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
}

Answer 1

1. 更改放置功能並添加第二個參數。
2. 將元素附加到傳遞給drop函數的第二個參數上。
3. 在drop函數中this引用作為第二個參數傳遞

 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } // change 1 :: added el function drop(ev, el) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); // change 2 :: append to el el.appendChild(document.getElementById(data).cloneNode(true)); } 

 .drag-example { border: 1px Solid Black; width: 50px; height: 50px; margin-bottom: 5px; } .drop-example { border: 1px Solid Red; width: 50px; height: 50px; } 

 <div class='drag-example' id='drag-1' draggable='true' ondragstart='drag(event)'></div> <!-- change 3 :: pass this to drop --> <div class='drop-example' ondrop='drop(event, this)' ondragover='allowDrop(event)' id='drop-div'></div>