JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="draggable-4">
  <p>drag 1</p>
</div>
<div class="draggable-4">
  <p>drag 2</p>
</div>
<div class="draggable-4">
  <p>drag 3</p>
</div>

<div style="clear: both;padding:10px"></div>

<div class="droppable-7">drop here</div>
<div class="droppable-7">drop here</div>
<div class="droppable-7">drop here</div>

CSS

.draggable-4 {
           width: 90px;
           height: 50px;
           padding: 0.5em;
           float: left;
           margin: 0px 5px 10px 0;
           border: 1px solid red;
           background-color: #B9CD6D;
         }
         
         .droppable-7 {
           width: 100px;
           height: 90px;
           padding: 0.5em;
           float: left;
           margin: 10px;
           border: 1px solid black;
           background-color: #A39480;
         }
         
         .droppable.active {
           background-color: red;
         }

JavaScript

$('.draggable-4').draggable({
              revert: true
            });
            $('.droppable-7').droppable({
              hoverClass: 'active',
              drop: function(e, ui) {
                $(this).html(ui.draggable.remove().html());
                $(this).droppable('destroy');
                $(this)
                  .addClass("ui-state-highlight")
                  .find("p")
                  .html("i'm destroyed!");
              }
            });