Remove draggable from clone after being dropped, but retain event bindings?

Question

I've got a jQuery draggable concept I'm having trouble with. Here is the example:

http://jsfiddle.net/3CtfD/3/

Basically, I've got a draggable element - the little red box. You can click and drag it into the table on the right, and when you drop it into a table cell it will fill up that cell. This part works fine.

Here's where I am stumped:

1. I need helper: "clone" in the draggable initialization so that the click event binding is passed along to the clone. You can see this if you remove true from clone(true) in DroppedOnGrid, you will no longer get the alert when clicking on a red box that has been dropped onto the grid. This part works fine.
2. Once a red box has been dropped onto the grid, and it has expanded to fill the cell, I want to remove the draggable functionality from that clone so it cannot be dragged again. You'll notice how once you drop a red box onto the grid and then try and drag that clone you're still actually grabbing the little red box on the left.

If I remove true from clone(true), it works as expected but I lose my click event binding on the clone.

I've tried updating the DroppedOnGrid function to use:

ui.draggable.clone(true).css({ height: "100%", width: "100%"}).appendTo($(this)).draggable("destroy");

Which results in:

Cannot read property 'options' of undefined

I've also tried simply removing the ui-draggable class:

ui.draggable.clone(true).css({ height: "100%", width: "100%"}).appendTo($(this)).removeClass("ui-draggable");

But this had no effect. Lastly, I've tried disabling draggable:

ui.draggable.clone(true).css({ height: "100%", width: "100%"}).appendTo($(this)).draggable("disable");

But this results in the little red box on the left also becoming disabled.

Does anyone know how I can achieve both passing the click event through to the clone, but disabling draggable once it has been placed on to the grid?

Answer 1

It is better not to clone(true) as draggable widget might have events attached to item being dragged. Instead you can just clone the element and attach your event to the parent container.

$("#target, #origin").on("click", ".box", function () {
    alert('clicked');
});

and

 ui.draggable.clone().css({
        height: "100%",
        width: "100%"
 }).appendTo($(this));

Demo