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
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by urbancalli

Dani AI

Generated

's droppable idea is valid for explicit drop targets, and 's prevAll()/nextAll() trick can work. A more robust, easy-to-reason-about method is to snapshot the list order when dragging starts and compare that snapshot to the final order when sorting finishes. That lets you reliably determine which item previously occupied the slot the dragged item now sits in.

The steps are:

  1. Give each sortable item a unique id (or use a data-* key and build arrays yourself).
  2. On start snapshot the order of every connected list with sortable("toArray") and stash it on the container.
  3. On update (for same-list moves) and receive (for connected-list drops) compare the stored before array to the current after array. The index where the dragged item's id appears in after is the slot it now occupies; before[index] is the id that used to be there (it may be undefined if dropped at the end).

Example pattern:

$('.connectedSortable').sortable({
  connectWith: '.connectedSortable',
  start: function(e, ui){
    $('.connectedSortable').each(function(){
      $(this).data('before', $(this).sortable('toArray'));
    });
  },
  update: function(e, ui){
    var before = $(this).data('before') || [];
    var after  = $(this).sortable('toArray');
    var newIndex = after.indexOf(ui.item.attr('id'));
    var replacedId = before[newIndex]; // undefined if dropped at list end
    if (replacedId) console.log('replaced id:', replacedId);
  },
  receive: function(e, ui){
    // same logic as update for cross-list drops
  }
});

Notes: update fires for intra-list changes and removal, so using receive for cross-list may be cleaner. If items lack id, build before/after with .map() on a data-id. For reference see the jQuery UI Sortable docs and the toArray method: jQuery UI Sortable API toArray method.

Recommended Answers

All 2 Replies

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

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.