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 acplish this WITHOUT adding a "remove" link in the sort list. Thanks a lot. For more information please refer to /

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 acplish this WITHOUT adding a "remove" link in the sort list. Thanks a lot. For more information please refer to http://the-stickman./web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

• javascript
• jquery
• jquery-ui-sortable
• draggable

Share Improve this question Follow edited Mar 24, 2009 at 10:09 Swamy g asked Mar 24, 2009 at 7:17 Swamy gSwamy g 2,16644 gold badges2424 silver badges3737 bronze badges 1

• The link you provided does not not seem to work, please either provide the link or the relevant part of the code. – karim79 Commented Mar 24, 2009 at 9:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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();
    }
  }
});