JQuery UI Draggable - Helper function which returns clone() only clones once if arguments passed to clone()

Question

I am cloning elements as they are dragged out of a JQuery UI Draggable list using JQuery's clone() method. Looking at the clone() documentation, I see that I can clone events already bound to these elements by passing one or two Boolean arguments (true,true) to the clone() method.

It's with passing these arguments that things get weird. If I just use clone() as shown below, things work as expected.

$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: function(e) {
        return $(this).clone();
    }
});

In the above example I get unlimited clones, but my events tied to the cloned element are not cloned as well. So then, naturally, I want to add one or two arguments to this clone() method so that I can also clone events!

$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: function(e) {
        return $(this).clone(true);
    }
});

But this makes things only clone once. See the below fiddles for examples!

Here's a fiddle with clone(true) which only clones once: http://jsfiddle.net/og937wy7/9/

And here's a fiddle with clone() which clones many times. http://jsfiddle.net/og937wy7/10/

Answer 1

I believe you misused "clone" in helper option - you can not specify a method as a string, string is just a identifier how jQueryUI handles dragging elements. You either give a method (callable), or a string, as in the docs.

If you set the helper option to "clone" instead of "clone(true, true)", a dragged element will be copied (when "dragged"), and as I see in the fiddle, the events are also attached to it (since you bind events properly).

Try this in your fiddle:

$(".sortable").sortable({
});
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone"
});