Перетаскивание (своп, удаление) JavaScript

Question

Я пытаюсь создать приложение, чтобы практиковать и понимать перетаскивание.

Мое приложение имеет зону выпадения, панель инструментов для перетаскиваемых элементов и зону выпадения для удаления элементов.

Что нельзя сделать, это замена позиции между двумя элементами в зоне выпадения. Когда я пытаюсь изменить положение, перетаскивая один поверх другого, другое падение выполняется над предыдущим элементом.

вот code pen link к моему применению.

<fieldset> 
 
    <legend>Drop Zone</legend> 
 
    <div id="dz" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
</fieldset> 
 
</form> 
 
<div class="card text-xs-center"> 
 
    <div class="card-block"> 
 
    <div id="textbox"> 
 
     <div id="dti1" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti1">Text Input</label> 
 
     <input type="text" class="form-control" id="ti1" placeholder="text"> 
 
     </div> 
 
     <div id="dti2" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti2">Password</label> 
 
     <input type="password" class="form-control" id="ti2" placeholder="Password"> 
 
     </div> 
 
     <div id="dti3" class="form-group" draggable="true" ondragstart="drag(event)"> 
 
     <label for="ti3">Example textarea</label> 
 
     <textarea class="form-control" id="ti3" rows="3"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="delete" ondragover="allowDrop(event)" ondrop="del(event)">Drop here to delete </div> 
 
</div>

это изображение даст вам представление о том, что я говорю

Answer 1

Чтобы предотвратить падение внутри другого элемента, вы можете добавить проверку id:

function allowDrop(e) { 
    'use strict'; 
    if (e.target.id === 'dz') { 
     e.preventDefault(); 
    } 
} 

Это позволит отказаться только от основного контейнера