Drag, drop, sortable system using jQuery

This is quite a complicated question so I am not looking for "full examples", but instead ideas of implementing a solution to my problem.

I am creating a drag-and-drop page where users can drag and drop tools into their workspace. This is currently working fine through the implementation of draggable() (jQuery UI).

However, the system is getting complicated with new features I am implementing:

• When dragged onto the workspace, the user can freely move the items around their page. However I would like the user to be able to drag items on top of other divs- and this dropped item should "morph" into this div (hopefully by using append()). This specific div that the element is dropped onto implements sortable(), so where ever the dropped element is placed should be its specific position on this sortable list.

  • EXAMPLE: If the div contains a number of dropped elements; lets say 5 items, if another item is dropped in between the 2nd and 3rd items, it should be appended to this div in that position.

• Secondly, any element that is appended to a sortable div should then have the ability of being dragged out of this sortable div (un-appended) and back onto the main area of the workspace (I have no clue of how to do this!) BUT it should still holds its ability of being sorted (list should still be sortable).

I am using jQuery + jQuery UI to complete this project and may use other javascript-based extensions if they can complete my desired outcome easily.

Type of implementation I have at the moment

This implementation is very unfinished.

    $("div.layout.lo-content > div.content").droppable(
    {
        drop: function(e, ui)
        {
            $(ui.draggable).appendTo($(this));
            if($(this).hasClass("ui-sortable"))
            {
                $("div.content").sortable('refresh');
            }
        }
    });

^^ when doing sortable('refresh') it breaks the system with error:

Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'refresh'

The sortable list which the item is dragged onto:

$("div.layout.lo-content > div.content").sortable(
{
    opacity:0.7,
    axis:'y',
    start: function(e, ui)
    {
        $(this).children("div.ui-sortable-placeholder").css("height",$(ui.helper).css("height"));
    }
});