How to prevent falling into div element?

Question

I am creating a drag and drop system using HTML and JavaScript. I would drag the task ( div ) from the "To Do" column to "In Development" and vice versa. The only problem I encountered is that you can drag the task to another task and I won’t.

This is the initial situation:

and this happens after drag and drop:

Now I will prevent users from dragging task 2 to task 1. How can I do this? Below you can find my code.

Thanks in advance.

 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

You can solve this problem by adding the "noDrop" class to your post-div, and then updating your drop function with a test for this class. The following steps use jQuery to run a test using the jQuery hasClass function.

 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>