Jquery Help : Draggable to Sortable and then back to draggable again.

Question

I have a pool of items in the drag list which is connected to a sortable using connectToSortable option. Now I want to remove some items from this sort list and move them back to the drag list. Sort of like an undo. Suppose the user moves some 5 items to sort list and decides he/she wants only 4 items, and decides to just drag the unwanted item from the sortlist TO the drag list. How do I accomplish this WITHOUT adding a "remove" link in the sort list. Thanks a lot. For more information please refer to http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

Answer 1

This jQuery UI example seems like what you're after. It features two connected list and the user can drag elements between them.

But I suspect that your scenario does not match the example. Let say you have a drag list, an UL with each LI made draggable and linked to another UL made a sortable (See this link for an example). Each time you drag something from the drag list, clone is used of the element dragged. Using the "out" event, you can register when one drags an item outside the sortable list and if the item is still outside when the "stop" event is triggered, remove it from the sortable. Using the ui.position & ui.offset properties of the sortable widget, you can determine if the item was dragged over the drag list before actually removing the item from the sortable.

Hope this helps.

Answer 2

Did this ever get solved? I have an app that needs this exact solution (dragable to sortable and back again) and I can't believe this isn't easier...

Answer 3

I think the simplest solution is to make your draggable list droppable also, and handle that drop event. I have a #priority_articles_list as a sortable and li.article as graggable, they are inside #articles. In most simple case you can just call ui.draggable.remove();, that should do the trick.

$("#articles").droppable({
  accept: '#priority_articles_list > li',

  drop: function(ev, ui) {
    draggable_id = "#" + ui.draggable.attr("id").replace("priority_", "");
    $(draggable_id).removeClass("shouldnt_drag");
    ui.draggable.remove();
    if ($("#priority_articles_list").children("li").length == 1) {
      $("#priority_articles p").show();
    }
  }
});