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 id="draggable-2" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
   <div id="droppable-2" class="ui-widget-header">
      <p>Drop here</p>
   </div>
   <div id="droppable-3" class="ui-widget-header">
      <p>I'm disabled, you can't drop here!</p>
   </div>
   <div id="droppable-4" class="ui-widget-header">
      <p>Tolerance Touch!</p>
   </div>
   <div id="droppable-5" class="ui-widget-header">
      <p>Tolerance Fit!</p>
   </div>

CSS

#draggable-2 { 
           width: 100px; height: 50px; padding: 0.5em; 
           margin: 0px 5px 10px 0; 	    
         }
          #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px; 
         }

JavaScript

$( "#draggable-2" ).draggable({
              opacity: 0.35,
              revert: true,
              snap: true,
              zIndex: 2800,
              start: function () {
                  console.log('start-drag');              
                  //Positioning.initialize($(this));
              },              
            });
            $( "#droppable-2" ).droppable({
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            },
            out: function(e, ui) {
                console.log('out');        
                //$(this).droppable('option', 'accept', '.item');
            },

         });
         $( "#droppable-3" ).droppable({
            disabled : "true",
            drop: function( event, ui ) {
                $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#droppable-4" ).droppable({
            tolerance: 'touch',
            drop: function( event, ui ) {
            $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped with a touch!" );
            }
         });
         $( "#droppable-5" ).droppable({
            tolerance: 'fit',
            drop: function( event, ui ) {
             $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped only when fully fit on the me!" );
            }
        });