title: Javascript Drag and Drop Hover Temporary Div Placeholder similar to Trello?
body: <p>I have a basic drag and drop trello-like kanban board. You can drag tasks between different grey boxes. It uses HTML drag and drop API found here <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a>.</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>var dropTarget = document.querySelector(".drop-target");
  var draggables = document.querySelectorAll(".drag-task");
  
  // Tells the other side what data is being passed (e.g. the ID is targeted)
  draggables.forEach(item =&gt; {
    item.addEventListener("dragstart", function(ev){
      ev.dataTransfer.setData("srcId", ev.target.id);
    });
  })
  // The end destination, prevent browsers default drag and drop (disabling breaks feature)
  // because it's disabled by browsers by default
  dropTarget.addEventListener('dragover', function(ev) {
    ev.preventDefault();
  });
  // End destination where item is dropped into
  dropTarget.addEventListener('drop', function(ev) {
    ev.preventDefault();
    let target = ev.target;
    let droppable  = target.classList.contains('drag-box');
    let srcId = ev.dataTransfer.getData("srcId");
  
    if (droppable) {
      ev.target.appendChild(document.getElementById(srcId));
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/***********DRAGGABLE BACKGROUND ****************/
  .drag-box {
    background-color: lightgray;
    float: right;
    width: 120px;
    min-height: 50px;
    padding-bottom: 30px;
    height: auto;
    margin: 30px;
  }
  .drag-task {
    background-color: white;
    margin: 15px;
  }
  .drop-active {
    border: 1px dashed red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="drop-target"&gt;
      &lt;div class="drag-box"&gt;
        &lt;div class="drag-card"&gt;
          &lt;div draggable="true" id="task1" class="drag-task"&gt;Test Card 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="drag-card"&gt;
          &lt;div draggable="true" id="task2" class="drag-task"&gt;Test Card 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="drag-card"&gt;
          &lt;div draggable="true" id="task3" class="drag-task"&gt;Test Card 3&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="drag-box"&gt;
      &lt;/div&gt;
      &lt;div class="drag-box"&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want to do to achieve is an effect similar to this gif found <a href="https://github.com/afmeva/trello-clone-vanilla" rel="nofollow noreferrer">here</a>. This creates another <code>&lt;div&gt;</code> element on the same level as <code>drag-card</code> class on a draghover effect, and repositions itself accordingly.</p>
  
  <p><a href="https://i.stack.imgur.com/Mtl1G.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mtl1G.gif" alt="enter image description here"></a></p>
  
  <p>I know I have to use <code>dragover</code> and <code>dragleave</code> event listeners but that's as far as I got. I added this code at the end of the file. I have never used drag event listeners so this is new to me.</p>
  
  <pre><code>var makeHoverElement= true;
  dropTarget.addEventListener("dragover", function(ev){
    if(makeHoverElement){
      let newNode =document.createElement('div');
      newNode.className ='drop-active'
      ev.target.parentElement.prepend(newNode);
      makeHoverElement = false;
    }
  });
  
  dropTarget.addEventListener("dragleave", function(ev){
     // really I have no idea how to make this effect
  });
  </code></pre>
  
  <p>Results so far have not turned out as I expected. Dragover is applying to element where the <code>task</code> item originated from</p>
  
  <p><a href="https://i.stack.imgur.com/2xgHf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2xgHf.gif" alt="enter image description here"></a></p>