[jQuery] Use Sortable and Droppable together can't work in IE (but work in Firefox)
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();
}
}
);
}
);