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 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 |
Changed October 11, 2012 09:07PM UTC by comment:2
| milestone: | TBD → 2.0.0 |
|---|
Changed November 06, 2012 03:02AM UTC by comment:3
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
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!
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/