$(document).ready(function(index){
    $(connectSort).each(function(index, obj){
      $("." + this).sortable({
        connectWith: ".connectedSortable_" + this,
        cancel: '.state-disabled',
        revert: true,
        start: function(event, ui) {alert(ui.item.attr("title")) },
        stop: function(event, ui)  { }
      }).disableSelection();
    });
});

the first function(start: function ..) displays an attribute (title) of the dragged item once the sorting starts. supposedly, the second function (stop: function ..) would display the same attribute but of the item replaced by the dragged item once the sorting stops.

I have tried a lot of things already, but none seems to work.
Please help. thank you.

Draggable doesn't know much about the location that it drags to. Though I suspect that you might be able to traverse the dom to figure it out, a much better solution, I think, would be to add jQuery Droppable to the party. Droppable's "this" refers to the element that received the drop. "ui" refers to the thing that moved. From there it's easy.

@tqwhite thank you for your advice. I kinda found a way through it.

I used the prevAll() and nextAll() to determine surrounding items once the dragged item is dropped (and the sorting stopped).

stop: function(event, ui){
   prevPos = parseInt (ui.item.prevAll().attr("position"));
   nextPos = parseInt (ui.item.nextAll().attr("position"));

something like that. hope it will help others too.
:D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.