在一個jQuery排序連接到一個可拖動的列表，我怎麼能告訴特定的列表項目，可拖動項目被放到？

Question

考慮以下對列表：

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> 

<script> 
jQuery(function($) { 
    $('#list2 li').draggable({ 
     cursor: 'move', 
     helper: 'clone', 
     connectToSortable: "#list1", 
     update: function(event, ui){ 
      // In here, I can get the item being dragged by inspecting 
      // event.toElement (and probably other ways as well), and 
      // I can find the list I am dropping onto by inspecting 
      // event.target. 

      // But, how do I tell what particular list item in the "user's 
      // queue" (#list1) list that the item is being dropped onto? 
      // E.g., if I drop "Green" onto "Thing", so it displaces "Thing", 
      // and the list now contains "Some, Green, Thing", how can I tell 
      // here in code that "Green" was dropped onto "Thing"? 
     } 
    }); 
    $('#list1').sortable({ 
     revert: true, 
    }); 
}); 
</script> 

Here is a fiddle with that code.

在代碼中的註釋概述了我的問題。重複一遍，我想知道如何以編程方式確定可拖動元素被放到的特定列表項目？

Answer 1

如果你的意思是排序的更新，那麼你可以這樣做：

$('#list1').sortable({ 
     revert: true, 
     update: function(event, ui){ 
      ui.item.prev().css('color', 'green'); //get the prev element of item sorted just now, applies for the dropped as well 
      ui.item.next().css('color', 'blue');//get the next element of item sorted just now, applies for the dropped as well 
     } 
    }); 

像這樣的事情？

$('#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()); 
     } 
    }); 

Demo