JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<h1> 
    Ticket <a href="http://dev.jqueryui.com/ticket/4088">#4088</a> - Unable to remove() ui.draggable (sortable item) immediately after the drop callback.
</h1> 
<h2> 
    TEST: Drag 'Special Item' to the div labelled 'Drop here'
</h2> 
<h2> 
    TEST: Drag a 'Normal Item' to the div labelled 'Drop here'
</h2> 

<ul id="sortable"> 
    <li class="ui-state-default" id="special"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Special Item</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Normal Item 1</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Normal Item 2</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Normal Item 3</li> 
</ul> 

<div id="trash" class="ui-widget-content ui-state-default"> 
    <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Drop here</h4> 
</div> 

<h3> 
    ASSERT: The dropped item is removed from the original list and the following text does not appear: "<strong>I was dropped and removed, but still here I am!</strong>"
</h3>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

#trash { width: 58%; height: 8em; padding: 1%; margin-top: 1%; }
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }

JavaScript

$(function() {
    $("#sortable").sortable();
    $("#trash").droppable({
        accept: '#sortable > li',
        activeClass: 'ui-state-highlight',
        drop: function(ev, ui) {
            if (ui.draggable.is('#special')) {
                setTimeout(function() {
                    ui.draggable.remove();
                }, 1);
            } else {
                ui.draggable.remove();
                ui.draggable.html('<strong>I was dropped and removed, but still here I am!</strong>');
            }
        }
    });
});