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:
- 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.
- 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?