JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<div class="drop">

  <div class="drop">

  </div>

</div>

<div class="drag">drag me</div>

CSS

.drop {
  border: 2px solid silver;
  background-color: whitesmoke;
  padding: 20px;
  margin: 10px;
  color: #777;
  font-family: sans-serif;
  font-size: 12px;
}

.drag {
  display: inline-block;
  padding: 5px;
  border: 1px solid silver;
  background-color: white;
  color: #777;
  font-family: sans-serif;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
}

.drag-hover {
  border-style: dashed;
  border-color: rebeccapurple;
}

JavaScript

$('.drop').droppable({
  greedy: true,
  tolerance: 'touch',
  out: function(event, ui) {
    $('.drop').removeClass('drag-hover');

  },
  drop: function(event, ui) {
    ui.helper.detach();
    var $element = $("<div class='drop'>new Droppable<div/>");
    $(event.target).append($element);
    $('.drop').removeClass('drag-hover');
    var options = $(this).droppable("option");
    $element.droppable(options);
  },
  over: function(event, ui) {
    setTimeout(function() {
      $(event.target).addClass('drag-hover');

    }, 10);
  },
});

$('.drag').draggable({
  revert: 'true',
  helper: "clone",
});