JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<p>Here we have a sortable list and a draggable item.<br />
    The draggable item uses the connectToSortable to connect to the sortable list.<br />
    When the draggable item is dragged in to the sortable list the receive handler is fired.<br />
    From what I can find there is no (clean) way to get the new item that was dropped in the sortable from the receive event handler.</p>
<p>Am I missing something or is this a bug in jQuery UI?</p>
<h4>Sortable</h4>
<ul id="sortable" class="ui-sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
</ul>
<h4>Draggable</h4>
<ul id="draggable">
    <li class="ui-state-default" id="drag1">Draggable Item</li>
</ul>

CSS

h4 {
    font-weight: bold;
    margin: 5px;
}
#sortable,#draggable{         
    list-style-type: none;     
    margin: 0;     
    padding: 0;     
    width: 60%; 
}
#sortable li,#draggable li{     
    margin: 0 3px 3px 3px;     
    padding: 0.4em;     
    padding-left: 1.5em;     
    font-size: 1.4em;     
    height: 18px; 
}
#draggable li{    
    border: 1px solid red;
}

JavaScript

$('#sortable').sortable({
    helper: 'clone',
    items: 'li',
    revert: true,
    receive: function( event, ui ) {
        // ui does not include the new draggable item!
        console.log( ui );
        /* 
        Only solution i have seen is to add an ID to the
        draggable item and then search the sortable list to find it
        which is very nasty because it means there are 2 items with the same id
        YUCK!
        */
        var item = $(this).find( "#" + ui.item.attr("id") );
        console.log( item );
    }
});
$('#draggable').find('li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid'
});