Как предотвратить падение в элемент div?

Question

Я делаю систему перетаскивания с помощью HTML и JavaScript. Я бы перетащил и задрапировал задачу (div элементов) из столбца «To Do» в «In Development» и наоборот. Единственная проблема, с которой я столкнулся, это то, что вы можете перетащить задачу в другую задачу, и я этого не сделаю.

Это начинают ситуацию:

и это после перетаскивания:

Теперь я предотвратить, чтобы пользователи могли перетащить и оставить задачу 2 в задачу 1. Как я мог это сделать? Ниже вы можете найти мой код.

Заранее спасибо.

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

table { 
 
    font-family: "Segoe UI", sans-serif; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 
th { 
 
    background-color: lightgray; 
 
} 
 
th, 
 
td { 
 
    width: 33.33%; 
 
} 
 
td { 
 
    min-height: 80px; 
 
} 
 
.post-it { 
 
    background-color: yellow; 
 
    padding: 10px 5px; 
 
    margin: 5px; 
 
    margin-bottom: 20px; 
 
    box-shadow: 5px 5px 5px gray; 
 
    border: 1px black solid; 
 
} 
 
.post-it h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
}

<table> 
 
    <tr> 
 
    <th>To Do</th> 
 
    <th>In Development</th> 
 
    <th>Done</th> 
 
    </tr> 
 

 
    <tr> 
 

 
    <td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
     <div id="task1" class="post-it" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 1</h4> 
 
     <p draggable="false">Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
     <div id="task2" class="post-it" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 2</h4> 
 
     <p draggable="false">Irish skinny, grinder affogato</p> 
 
     </div> 
 

 
    </td> 
 

 
    <td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    <td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    </tr> 
 
</table>

Answer 1

Вы можете решить эту проблему путем добавления класса «noDrop», чтобы ваш пост это DIV, а затем обновить вашу функцию падения с тестом для этого класса. Следующие действия используют jQuery для выполнения теста, используя функцию jQuery hasClass.

function drop(ev) { 
 
    var _target = $("#" + ev.target.id); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    if ($(_target).hasClass("noDrop")) { 
 
    console.log("no transfer"); 
 
    ev.preventDefault(); 
 
    } else { 
 
    ev.preventDefault(); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
    } 
 
}

table { 
 
    font-family: "Segoe UI", sans-serif; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 
th { 
 
    background-color: lightgray; 
 
} 
 
th, 
 
td { 
 
    width: 33.33%; 
 
} 
 
td { 
 
    min-height: 80px; 
 
} 
 
.post-it { 
 
    background-color: yellow; 
 
    padding: 10px 5px; 
 
    margin: 5px; 
 
    margin-bottom: 20px; 
 
    box-shadow: 5px 5px 5px gray; 
 
    border: 1px black solid; 
 
} 
 
.post-it h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>To Do</th> 
 
    <th>In Development</th> 
 
    <th>Done</th> 
 
    </tr> 
 

 
    <tr> 
 

 
    <td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
     <div id="task1" class="post-it noDrop" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 1</h4> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
     <div id="task2" class="post-it noDrop" draggable="true" droppab ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 2</h4> 
 
     <p>Irish skinny, grinder affogato</p> 
 
     </div> 
 

 
    </td> 
 

 
    <td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    <td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    </tr> 
 
</table>