JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div id="draggable" class="ui-widget-content">
	<center>  
      <p>KEEP</p>
	  <p>CALM</p>
      <p>AND</p>
	  <p>BE</p>
      <p>AWESOME</p>
    </center>
</div>
    
<button id="enable" type="button">Enable</button>
<button id="disable" type="button">Disable</button>

<hr>
<br>


<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" />
		<img src="http://placehold.it/160x100" id="three" title="three" />
	</div>
  <p>test</p>
	<div id="drop" class="fbox">
   
	</div>
</div>

CSS

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

#origin
{
  background-color: lightgreen;
}

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

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

JavaScript

//accept type class in draggable functionality

//Ex1
$('#draggable').draggable();

// when button clicked ...
$('#enable').click(function() {
    $("#draggable").draggable({ disabled: false });
});

// when button clicked ...
$('#disable').click(function() {
    $("#draggable").draggable({ disabled: true });
});


/////////////////////////////////////
/////////////////////////////////////
/////////////////////////////////////


//Ex2
$(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});

$("#drop").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);      
             
             
                }});