JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="draggable1" class="draggable ui-widget-content">
  <p>Drag 1</p>
</div>

<div id="draggable2" class="draggable ui-widget-content">
  <p>Drag 2</p>
</div>

<div class="draggable ui-widget-content">
  <p>Drag 3</p>
</div>
 
<div class="draggable ui-widget-content">
  <p>Drag 4</p>
</div>

<div class="droppable ui-widget-header">
  <p>Drop here</p>
</div>

<div class="droppable ui-widget-header">
  <p>Drop here</p>
</div>

CSS

.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

JavaScript

$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        if(!$(this).data('droplist')){ //check for list
            $(this).data('droplist', []);
        }
        var droplist = $(this).data('droplist'),
            drag = $(ui.draggable)[0];
       
        if(droplist.indexOf(drag) === -1) //check if element already exists
            droplist.push(drag);
        
        $( this )
        .addClass( 'ui-state-highlight' )
        .find( 'p' )
        .html( 'Dropped!' )
        .end()
        .attr('title', droplist.length + ' entries');
        
         $(this).data('droplist', droplist); //set list
    }
});