JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<span>Drag the grey square to the top left corner - it'll trigger a drop event on the hidden droppable.</span>
<div class="draggable"></div>
<div class="canvas">
    <div class="droppable"></div>
</div>

CSS

.draggable, .droppable {
    background-color: #999;
    position: absolute;
    width: 50px;
    height: 50px;
}

.draggable {
    left: 20px;
    top: 20px;
}

JavaScript

$( '.draggable' ).draggable();

$( '.droppable' ).droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        console.log( 'draggable dropped on %o; event=%o, ui=%o',
            this, event, ui );
    },
    tolerance: 'touch'
});

$( '.canvas' ).hide()