JSFiddle - React, Tailwind, and code Playground

by Ian Lovett

HTML

<div id="drop-container">
    drop-container
    <div id="drop-container-child"></div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

#drop-container {
    margin: 50px;
    background: #f00;
    height: 300px;
    width: 400px;
}

#drop-container.dragging {
    background: #00f;
}

#drop-container-child {
    margin: 50px;
    background: #0f0;
    height: 100px;
    width: 100px;
}

JavaScript

$(function() {
    
    var $el = $('#drop-container'),
        transitioning = false;

    $el.on('dragenter', function(e) {

      transitioning = true;
      setTimeout(function() {
        transitioning = false;
      }, 1);

      $el.toggleClass('dragging', true);

      e.preventDefault();
      e.stopPropagation();
    });

    // dragleave fires immediately after dragenter, before 1ms timeout
    $el.on('dragleave', function(e) {

      // check for transitioning flag to determine if were transitioning to a child element
      // if not transitioning, we are leaving the container element
      if (transitioning === false) {
        $el.toggleClass('dragging', false);
      }

      e.preventDefault();
      e.stopPropagation();
    });

    // to allow drop event listener to work
    $el.on('dragover', function(e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $el.on('drop', function(e) {
      alert("drop!");
    });

});