Question

I have DIVs with OL>LI lists in them, the lists are each sortable and I connect them together so the user can move and LI from one list to another.. seems like a common thing to do.

When the sortable list receives an item, that item loses its “sortability”..or atleast the handle is not working on it.

Here’s some code to show you how I setup my sortable lists:

$(".sortable").sortable({
  connectWith: ".sortable",
  revert: true,
  opacity: 0.5,
  handle: $('.sample_view_image span img'),
  cursor: 'move',
  receive: function(event, ui) {
    $(ui.item).formatSampleToGallery();
    $(ui.item).sortable("refresh"); //thought this would reconnect everything
  }
});

Answer 1

First, I was referencing $(ui.item) which isn’t sortable to begin with. duh.

Second, when I used the right selector $(ui.item).parent(), the “refresh” still didn’t properly re-establish the “handle”. It seems like “refresh” should take care of this for me, am I misusing it?!

I had to use the following code to make it work properly, which feels kinda dirty…:

$(".sortable").sortable({
  connectWith: ".sortable",
  revert: true,
  opacity: 0.5,
  handle: $('.sample_view_image span img'),
  cursor: 'move',
  receive: function(event, ui) {
    $(ui.item).formatSampleToGallery();

    $(ui.item).parent().sortable({
      connectWith: ".sortable",
      revert: true,
      opacity: 0.5,
      handle: $('.sample_view_image span img'),
      cursor: 'move'
    });
  }
});