I'm having a problem with using Sortable and Droppable (interface plugin for jquery) together.My Idea is drag an item into a container (dropable), and then when I drop it there is one new item will be created in the container item and I want the new items can sort together in the container. As you know, we can't use Sortable and Droppable together. So I have some trick for that problem. Below is my code. As you see, first in the ready() function, I load Sortable for the container and then define draggable for the items. Then, with the onStart event of dragable items, I destroy the sortable of the containers and load droppable of them. The onStop event is when I destroy the droppable and then recall the sortable of the containers.And the problem is that, it worked great in Firefox but rase some error in IE (so I add some stupid try catch for that, but it still can't work :( ). Can you help me for this error? Or are there any other solution to solve my problem? Thank you!!!
function loadDropable() { $("div.itemContainer").Droppable( { accept : 'menuItem', hoverclass: 'menuItemHover', ondrop: function (drag) { $(this).html($(this).html() + "<br/>" + $ (drag).attr("id")); } } ); } function loadSortable() { $('div.itemContainer').Sortable( { accept: 'item', helperclass: 'sortHelper', activeclass : 'sortableactive', hoverclass : 'sortablehover', handle: 'div.itemTitle', tolerance: 'pointer', onStart : function() { $.iAutoscroller.start(this, document.getElementsByTagName('body')); }, onStop : function() { $.iAutoscroller.stop(); } } ); } $(document).ready( function() { loadSortable(); $('div.menuItem').Draggable( { zIndex: 1000, ghosting: true, opacity: 0.7, revert: true, fx:300, onStart: function () { try { $('div.itemContainer').SortableDestroy(); } catch(err) { } loadDropable(); }, onStop: function() { try { $("div.itemContainer").DroppableDestroy(); } catch(err) {} loadSortable(); } } ); } );