Member Avatar for urbancalli 
$(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.

  • 2 Contributors
  • 2 Replies
  • 109 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by urbancalli
Member Avatar for tqwhite

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.

Member Avatar for urbancalli

@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

Edited by urbancalli because: n/a
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.