Draggable Sortable

Demo

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<p>
  <ul id="draggable" class="ui-menu">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
  </ul>
</p>
Please move items from the upper to the lower list. The dropped item's color should be changed when dropped.
<p>
  <ul id="sortable" class="ui-menu">
    <li class="ui-state-default">Item A</li>
    <li class="ui-state-default">Item B</li>
    <li class="ui-state-default">Item C</li>
  </ul>
</p>

JavaScript

$(function() {
    $("#sortable").sortable({
        receive: function (ev, ui) {                  
            var $target = ($(this).data('sortable')  || $(this).data('ui-sortable')).currentItem;
            
            $target.css('remove-class', 'ui-state-default').addClass('ui-state-highlight');
        }
    });
    $("#draggable li").draggable({
        connectToSortable: "#sortable",
        revert: 'invalid'
    });
});