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();
                    }
                }
            );
    }
);

Reply via email to