Skip to main content

Search and Top Navigation

#4993 closed bug (worksforme)

Opened December 04, 2009 11:52AM UTC

Closed November 06, 2012 03:02AM UTC

ui.sortable option helper (clone) doesn't work

Reported by: flos Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.sortable Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

$('sth').sortable ({

helper: 'clone'

});

seems not to work. There is no cloned helper to drag.

Attachments (0)
Change History (3)

Changed June 08, 2011 09:04PM UTC by jbicks comment:1

_comment0: I ran into this issue as well and realized in order to get the desired behavior I needed to use a draggable in conjunction with a sortable. The draggable is responsible for "cloning" the item. Since you can't really sort a list if you are "cloning" the item, I understand why sortable doesn't support "cloning". In addition you need to remove the element if you are "sorting", so here i use the "isold" class to find and remove the old element. In this example sortable2 is another div that I need to be able to drag into, so this probably would not be necessary in your case. \ \ \ $(function() { \ $('#sortable li').each(function(){ \ //$(this).data('id',$(this).attr('id')); \ $(this).attr('data-id',$(this).attr('id')); \ }); \ var setUpSortable= function() { \ $( "#sortable,#sortable2" ).sortable({ \ start: function(event,li){ \ $(event.srcElement).addClass('isold'); \ }, \ update: function(event,li){ \ $(event.srcElement).attr('id',$(event.srcElement).data('id')); \ if(event.target.id == 'sortable') \ { \ $('#sortable .isold').remove(); \ } \ $('#sortable .isold').removeClass('isold'); \ setUpSortable();//re-initialize sortable \ } \ }); \ $('#sortable li').draggable({ opacity: 0.7, helper: "clone" , connectToSortable:"#sortable,#sortable2",revert:false}); \ $( "#sortable,#sortable2" ).disableSelection(); \ }; \ setUpSortable(); \ }); \ 1307651961456148
_comment1: I ran into this issue as well and realized in order to get the desired behavior I needed to use a draggable in conjunction with a sortable. The draggable is responsible for "cloning" the item. Since you can't really sort a list if you are "cloning" the item, I understand why sortable doesn't support "cloning". In addition you need to remove the element if you are "sorting", so here i use the "isold" class to find and remove the old element. In this example sortable2 is another div that I need to be able to drag into, so this probably would not be necessary in your case. I put my code on jsFiddle: \ \ \ http://jsfiddle.net/We8SM/8/ \ \ \ \ 1307652306122973

I ran into this issue as well and realized in order to get the desired behavior I needed to use a draggable in conjunction with a sortable. The draggable is responsible for "cloning" the item. Since you can't really sort a list if you are "cloning" the item, I understand why sortable doesn't support "cloning".

In my example (see link below) when you drag an item from the top list to the bottom list, the element in the top remains there. But when you are sorting the top list the item is first cloned and then removed immediately. I put my code on jsFiddle:

http://jsfiddle.net/We8SM/8/

Changed October 11, 2012 09:07PM UTC by scottgonzalez comment:2

milestone: TBD2.0.0

Changed November 06, 2012 03:02AM UTC by mikesherov comment:3

resolution: → worksforme
status: newclosed

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI. http://jsfiddle.net/3Ck4R/

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!