Question

I Have the following problem: After an item was being dragged out from the “sortable_pics_selected” list into the other list there is an event being fired with jquery ui “remove” event handler:

–>fiddle: http://jsfiddle.net/4DBLj/3/ <—

 $("#sortable_pics_selected").sortable({
            remove: function(event, ui) {
                alert('hi);
            }
        });


<div id="sortablecontainer_pic"> 
   <ul id="sortable_pics_all" class="connectedSortable">
      <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>
   </ul>

   <ul id="sortable_pics_selected" class="connectedSortable">
      <li id="1" class="ui-state-highlight">Item 1</li>
      <li id="2" class="ui-state-highlight">Item 2</li>
      <li id="3" class="ui-state-highlight">Item 3</li>
      <li id="4" class="ui-state-highlight">Item 4</li>
      <li id="5" class="ui-state-highlight">Item 5</li>
   </ul>
</div>  

Is there a way to figure out which id the removed item has? The above function just fires in general when any item was removed…what might be the best way to get the individual id? Is there a jquery ui function that can do this? If this is not the case…the remove method seems to me not being the right thing. I could write it in pure jquery but for this things jquery ui was build? Did i misunderstand something?

Answer 1

Based on your Fiddle, here is the final code

http://jsfiddle.net/4DBLj/5/

Get the id attribute of the ui item:

alert(ui.item.attr('id'));

EDIT: Regarding the ui.item comment “where i can read about the ui.class”.

jQuery UI has documentation on each of the widgets. While many include “ui” the actual content of that may vary. For the Sortable see this page:

http://jqueryui.com/demos/sortable/
Under the “Overview” tab. There you will find a reference to ui.item – the current dragged item. Which, in this instance has an attribute of “id” because you included one in your code “id=”” for that object.