перетаскивайте «брошенные предметы»

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. pass 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>