21

When using Jquery UI Sortable (which is great by the way) how do you get the item that is currently being sorted.

When you use $(this); it return the actual sortable list, not the current sorted item.

I want to do fancy-pants things with the widget when the user is dragging it around. E.g. Animate it when dragging between two lists.

So how do I get the current item being sorted?

There a little code below just to explain a little more...

$(function() {
    $("#sortable_1").sortable({
        start : function(event, ui){ 
            //get current element being sorted
        },
        stop : function(event, ui){ 
            //get current element being sorted
        }
    }).disableSelection();
});
CafeHey
  • 5,699
  • 19
  • 82
  • 145

1 Answers1

44

As far as I'm aware ui in your start: function(event, ui) is the current element being sorted.

As pointed out in the comments ui.item is the current element.

Nalum
  • 4,143
  • 5
  • 38
  • 55
  • 2
    Cheers. It's ui.item but ui is close enough. Have a tick. – CafeHey May 18 '10 at 10:34
  • How we then use ui.item along with jQuery for example removing a class from it? this does not work `ui.item.removeClass("invisible");` for me – limitcracker May 29 '20 at 20:15
  • 1
    @limitcracker if you're still looking I think it would be `$(ui.item).removeClass("invisible");` – Nalum Dec 04 '20 at 12:14
  • I would add that `ui.item` returns an object, so if you really want the element you should use `ui.item[0]`. This way you can get a normal JS element. Now you could do for example 'ui.item[0].classList.add("yourClass")`. – Enrique Sep 30 '22 at 19:32