JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<div id="draggable" class="ui-widget-content">
  <p>Ant Soldier</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Magic Butterfly</p>
</div>

CSS

#draggable {
   width: 100px;
   height: 100px;
   padding: 0.5em;
   float: left;
   margin: 10px 10px 10px 0;
   border: 1px solid black;
 }

 #droppable {
   width: 150px;
   height: 150px;
   padding: 0.5em;
   float: left;
   margin: 10px;
   border: 1px solid black;
 }

JavaScript

$(function() {
    $("#draggable").draggable();
    $("#droppable").droppable({
      drop: function(event, ui) {
        $(this).addClass("ui-state-highlight");
      },
      out: function(event, ui) {
        $(this).removeClass("ui-state-highlight");
      },
    });
  });