jQuery - keep draggable clone

I use clone helper for my draggables, but after I drag the clone and drop it, it do not remain itself in the droppables. I browse through some examples and i add .append() in the drop event, but the draggable do not retain in the position I drop. Any idea how can I make the draggable clone remain at the position where it is dropped?? Here is part of my script (I declare an option variable to store the option for the drop event):

            var element = ui.draggable.children();
            var oldID = element.attr('id');
          开发者_开发百科  element.attr('id', (oldID + '_' + counter));
            var pos = element.offset();
            var clone = element.clone();
            clone.width(element.width());
            clone.height(element.height());
            $(clone).css({
                "left": pos.left,
                "top": pos.top
            });
            $('#rightframe').append(clone);

Appreciate any help.....

Here is my script:

    var counter = 0;
    var options = {};
    options.accept = '.image';
    options.drop = function (event, ui) {

        if (ui.draggable.children().attr('id').match(/_(\d+)$/) != null) {
            // If ID contains number after an underscore, call UpdatePosition action
            var temp = ui.draggable.children();
            alert('inside if');
            updatePosition(temp);
        }
        else {
            // Image not exist, call CreateContainer action
            counter++;
            var element = ui.draggable.children();
            var oldID = element.attr('id');
            element.attr('id', (oldID + '_' + counter));
            var pos = element.offset();
            var clone = element.clone();
            clone.width(element.width());
            clone.height(element.height());
            $(clone).css({
                "left": pos.left,
                "top": pos.top
            });
            $('#rightframe').append(clone);
            updateImage(element, oldID);

        }
    }
    $('#rightframe').droppable(options);

I am doing the same thing in my webapp. my problem were 2 things.

1. cloning seemingly messes with the draggable/droppable capabilities.
2. getting the offset of the draggable is towards the screen whereas when setting the position on the clone and appending it to #rightframe makes it it is the offset towards the #rightframe object... eg if the offset of #rightframe is 10,10 and the offset of the draggable is 20,20. the eventual offset of the clone to the screen will be 30,30.

my solutions where as follows:

first when dropping. destroy all jquery-ui handles inside the droppable and recreate it at the end of the drop function. (your case maybe only calling $('#rightframe').droppable("destroy") and $('#rightframe').droppable(options); )

second in between the destroying and creating. calculate the offset by substracting the offset of the $("#rightframe") like so

var adjust = $("#rightframe").offset();
$(clone).css({
    "left": pos.left-adjust.left,
    "top": pos.top-adjust.top
});

here's hoping i understood your problem correct :)