I've done a few Google searches and turned up some solutions to
allowing sortables to be dragged between div's with overflows set to
either auto, scroll or hidden. The issue I'm having is as follows:
I have multiple sortable lists in different divs. These divs can be
tabbed between. To move items between each list, I use a droppable
item. From my Google searches, it appears the best way to dela with
the overflow problem is to clone the dragged sortable element and
insert it into a temporary 'swap list'.
To do this, I give my sortable lists the following options:
containment: 'document',
appendTo: '#swap-list',
helper: 'clone',
The code that handles the dropable event is similar to one on the
jQuery UI sortable demo page:
makeDroppable:function(element) {
var tab_items = $(element).droppable({
accept: ".connectedSortable li",
hoverClass: "drop-hover",
tolerance: 'pointer',
drop: function(ev, ui) {
var item = $(this);
var list =
$(item.find('a').attr('href')).find
('.connectedSortable');
if(list.find('li#' +
ui.draggable.attr('id')).length === 0) {
ui.draggable.hide('fast', function() {
$(this).css('background',
'#000');
list.css('border', '5px solid
red');
$(this).appendTo(list).show('fast');
list.sortable();
});
} else {
alert('This item already exists in your
list!');
}
return false;
}
});
}
The issue I'm seeing is that items are correctly added to the list
they're being dragged to, but are then reverting back to their
original pre-drag list. Note the CSS calls in the drop function
(included for testing purposes):
$(this).css('background', '#000');
list.css('border', '5px solid red');
I can verify that the correct list item has it's background colour
changed, and that the correct list is given a red border. So it would
appear that the list item is correctly swapped between lists, but that
for some reason jQuery is revert it to the old list after the drop
event.
Note: the above code works fine if I remove the overflow and drop the
sortables appendTo and helper settings.
Any suggestions?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
