JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"></script>
<div class="demo">
    
<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

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

</div>

CSS

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;z-index:50; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px;
              position:absolute; top:25px; left:140px; }

JavaScript

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });
        $( "#droppable2" ).droppable({
            greedy:true,
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                        .html( "Dropped!" );
            },
            over: function(event, ui){
               // $( "#droppable" ).droppable( "disable" )
            },
                    out: function(event, ui){
                     //$( "#droppable" ).droppable( "enable" )
                    }
        });
    });