JSFiddle - React, Tailwind, and code Playground

by Umesh Patil

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/ui-lightness/jquery-ui.css">
user's queue
<ul id='list1'>
  <li>Some</li>
  <li>Thing</li>
</ul>eligible items
<ul id='list2'>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Electric Banana</li>
  <li>Flamingo Pink</li>
</ul>

CSS

.prev {
  color: green;
}

.next {
  color: blue;
}

JavaScript

jQuery(function($) {
  $('#list2 li').draggable({
    cursor: 'move',
    helper: 'clone',
    connectToSortable: "#list1"
  });
  $('#list1').sortable({
    revert: true,
    update: function(event, ui) {
      $('.next, .prev').removeClass('next prev');

      var $prevElem = ui.item.prev(),
        $nextElem = ui.item.next();
      $prevElem.addClass('prev');
      $nextElem.addClass('next');
      console.log('Item sorted is before ' + $prevElem.text() + ' after ' + $nextElem.text());
    }
  });
});