jQuery Forum

Maybe try creating the draggable like this:
$(".draggable").draggable({
  helper: function() {
     return $(this).clone();
  },
  ...
});
Be careful that you don't clone an item with an ID, or if you do, make sure to change it to something else so that you don't end up with invalid markup.
--Erik
<div><span class="gmail_quote">On 10/20/07, <b class="gmail_sendername">erdibalint</b> <<a href="mailto:erdibalint@gmail.com">erdibalint@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Hi,
My idea is quite simple: drag and drop an image (wrapped in a div) to
another, bigger image (also in a div). I also want the draggable
images to be cloned so that they can be dragged and dropped again.
For a start I made the draggable images draggable:
$(".draggable").draggable(
{ helper: 'clone', ... }
)
and the big image droppable:
$("#canvas").droppable(
  { accept: ".draggable", tolerance: "fit", ... }
)
The drag and drop functionality works, if I show a "success message"
when the image is dropped, it displays all right, so everything seems
to be all right.
My problem is that the dragged object (image wrapped in the div)
disappears when dropped. I have found out that this is because of the
clone helper, if I remove the helper: 'clone' line than the dropped
image stays at its final position. However, I want it to be cloned so
it can be dragged again from its original position as I described
above.
Is there a way for a draggable object to be cloned and not to
disappear after being dropped at the same time? I know that the 'drop'
function in the droppable definition is passed the dragged object (or
the drag event?) but I haven't found a way to use this to achieve what
I want.
Could you help me out? Thank you very much,
Balint
ui. Is there a more verbose documentation on jquery.ui than the one on
<a href="http://docs.jquery.com/UI">http://docs.jquery.com/UI</a>? I tried to get info out of the source code
(as the source of the best documentation) but I am not yet at that
level of understanding the vast possibilities of javascript, I
reckon :)
</blockquote></div>

Thank you for your help, Erik, I tried the following:
$(".draggable").draggable({
helper: function() {
     return $(this).clone().attr("id", $(this).attr("id") +
"_1").addClass("dragged");
},
...
})
(I know the _1 suffix is only good for the time of the first drag but
I wanted to try this quickly)
However, that did not help, the moment I drop the image on the
droparea it simply disappears instead of resting at its final
position :(
Balint

Ok, I tried a different approach without using the draggable's helper
function at all. I came up with the following:
function makeDraggable(expr) {
/**
* Makes the selection (by expr) draggable
*/
$(expr).draggable(
    {
     start: function() {
        // only clone if clone is not yet present
        if ( $(".draggedClone").length == 0 ) {
         if ($(this).next().is("#addons .draggable")) {
            $(this).next().before($(this).clone().css("position",
"static").addClass("draggable").addClass("draggedClone"));
         }
         else {
            $(this).clone().css("position",
"static").addClass("draggable").addClass("draggedClone").appendTo($
(this).parent());
         }
         $(this).attr("id", $(this).attr("id") + '_' + ($
(".draggable").length + 1) );
         $(this).addClass("dragged");
        }
        makeDraggable(".draggable");
     },
}
);
}
and then I call makeDraggable(".draggable") in $
(document).ready(function(){...}), too.
What happens is that the dragging works perfectly initially, but not
on the clones. This seems to me the typical case of not binding the
event handlers to the generated elements (see tutorial "AJAX and
Events", http://docs.jquery.com/Tutorials:AJAX_and_Events). But that's
exactly why I delegated the behavior binding to a function
(makeDraggable), and call that function whenever a new draggable
element is created. So I am puzzled.
Even when I explicitly defined a button that called
makeDraggable(".draggable"), the newly created draggable elements did
not move an inch. Is there some basic stuff I do not perceive here?
Thank you,
Balint