Drag and Drop
 

Помогите разобраться, задача такая есть перетаскиваемые обекты и принемающий div. перетаскивание происходит клона а не самого элемента и добовляеться в принемающий div методом .appendTo, а как можно зделать чтоб пири добавлении он не вставал в конец или в начало(другим методом), а остовался там куда его положили. Тоесть если я перетаскиваемый элемент ложу в правый нижний угол то он там и остаеться, и при этом откуда я его перетаскивал должен остатся оригинал обекта.

У меня получился вот такой замудренный код.

// перетаскивание

    $('div[id*=element]').draggable({
        containment: "#wraper",
        revert: "invalid",
        grid: [ 20, 20 ],
        opacity: 0.5,
        scroll: false,
        zIndex: 35,
        appendTo: "body",
        helper: "clone",
        cursor: "move",
        stack: "div[id*=element] > img"
    }).find('img').css({
            'width': '50%',
            'height': '50%'
        });
//приемник
    $("#contener").droppable({
        accept: "#saitbar > #left > #accordion > .dropp > div[id*=element]",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            var element = $(ui.draggable);
            element.fadeIn(1000, function () {
                $(this).clone()
                    .addClass("newElement")
                    .appendTo("#contener")
                    .draggable({containment: "#contener", opacity: 0.5, stack: "div[id*=element]", cursor: "move"})
                    .resizable({containment: "#contener", /*aspectRatio:true*/})
                    .find('img').animate({
                        'width': '100%',
                        'height': '100%'
                    }, 100)

            });

Как поправить чтоб заработоло как я хочу?