title: How to prevent drop into a div element?
body: <p>I'm making a drag and drop system with HTML and JavaScript. I would drag and drap a task (<code>div</code> elements) from the column "To Do" to "In Development" and vice versa. The only problem I've got is that you could drag and drop a task into another task and that I won't.</p>
  
  <p>This is the begin situation:</p>
  
  <p><a href="https://i.stack.imgur.com/jii8Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jii8Q.png" alt="Normal view Task 1 and 2 are separated tasks"></a></p>
  
  <p>and this is after a drag and drop:</p>
  
  <p><a href="https://i.stack.imgur.com/hyVNs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hyVNs.png" alt="Task 2 is inside task 1"></a></p>
  
  <p>Now I'll prevent that users could drag and drop task 2 into task 1. How could I do that? Below you could find my code.</p>
  
  <p>Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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));
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;To Do&lt;/th&gt;
      &lt;th&gt;In Development&lt;/th&gt;
      &lt;th&gt;Done&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
  
      &lt;td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  
        &lt;div id="task1" class="post-it" draggable="true" ondragstart="drag(event)"&gt;
          &lt;h4 draggable="false"&gt;Task 1&lt;/h4&gt;
          &lt;p  draggable="false"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div id="task2" class="post-it" draggable="true" ondragstart="drag(event)"&gt;
          &lt;h4 draggable="false"&gt;Task 2&lt;/h4&gt;
          &lt;p  draggable="false"&gt;Irish skinny, grinder affogato&lt;/p&gt;
        &lt;/div&gt;
  
      &lt;/td&gt;
  
      &lt;td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/td&gt;
      &lt;td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>