JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<div id="Dropable">Droppable area</div>

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
}
#draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
}
#Dropable {
    height:300px;
    width:400px;
    border: 2px solid red;
}

JavaScript

$(document).ready(function () {
    $("#draggable").draggable();
    $("#Dropable").droppable({
        drop: function (event, ui) {
            $(this)
                .addClass("ui-state-highlight");
        }
    });
    $("body").droppable({
        drop: function (e) {
            e.preventDefault();
        }
    });
});