JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="wrapper">
  <div id="origin" class="fbox">
    <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
    <img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />

  </div>
  <p>test</p>
  <div id="drop-1" class="fbox"></div>
  <div id="drop-2" class="fbox"></div>
  <div id="drop-3" class="fbox"></div>
  <div id="drop-4" class="fbox"></div>
</div>

CSS

#origin
{
  background-color: lightgreen;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop-1, #drop-2, #drop-3, #drop-4
{
  background-color: red;
  min-height: 120px;
  margin:3px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
}

JavaScript

$(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});
$("#drop-1, #drop-2, #drop-3, #drop-4").droppable({ accept: ".draggable", 
           drop: function(event, ui) {
                    console.log("drop");
                   $(this).removeClass("border").removeClass("over");
             var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);      
             
             
                }, 
          over: function(event, elem) {
                  $(this).addClass("over");
                   console.log("over");
          }
                ,
                  out: function(event, elem) {
                    $(this).removeClass("over");
                  }
                     });
$("#drop").sortable();

$("#origin").droppable({ accept: ".draggable", drop: function(event, ui) {
                    console.log("drop");
                   $(this).removeClass("border").removeClass("over");
             var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);      
             
             
                }});