JSFiddle - React, Tailwind, and code Playground

by voithos

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div class="col drag">
    Drag me
</div>
<div class="col">
    <div class="drop">
        Drop on me
    </div>
    <div class="drop">
        Drop on me
    </div>
    <div class="drop">
        Drop on him^
    </div>
</div>

CSS

.col {
    display: inline-block;
}

.drag {
    border: 2px solid green;
    margin: 10px;
    padding: 10px;
}

.drop {
    border: 2px solid black;
    margin: 10px;
    padding: 10px;
}

.drop.active {
    border: 2px solid red;
}

JavaScript

var config = {
    accept: '.drag',
    activeClass: 'active',
    drop: function(event, ui) {
        var $this = $(this),
            $newDiv = $('<div/>').addClass('drop').text('Drop on me');
        $this.after($newDiv);
        
        // In the process of removing the original element, and making
        // the new element Droppable, the $.ui.ddmanager.droppables array
        // corresponding to the current Draggable scope gets shuffled around,
        // and some of the state for the next (in-order) Droppable doesn't get 
        // modified (e.g. the "active" CSS class remains)
        $this.remove();
        $newDiv.droppable(config);
    }
};

$('.drag').draggable({ helper: 'clone' });
$('.drop').droppable(config);