JSFiddle - React, Tailwind, and code Playground

by pauluithol

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.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;
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
}

.draggable {
    left: 20px;
    top: 20px;
    z-index: 1;
}

.droppable {
    background-color: #ddd;
    left: 200px;
    top: 200px;
}

JavaScript

$( '.draggable' ).draggable({
    accept: '.droppable',
});

$( '.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()