CODEWITHSUNDEEP
javascriptjqueryjquery-ui-draggablejquery-ui-droppable
Jonathan Wood
Jonathan Wood

Reputation: 67345

Dynamically Create Droppable Element

I'm implementing drag and drop using the jQuery UI Draggable and Droppable widgets. (Sortable didn't provide quite enough flexibility for me.)

As I drag, I'm dynamically creating a drop placeholder element to show precisely where a drop would be placed.

But how can I make this drop placeholder droppable itself? If I create it and then immediately call the droppable() method on it, this has no effect. And so if they user drops directly over a drop placeholder, how could I detect this?

You can see what I have so far at http://jsbin.com/uciviy/14.

Upvotes: 3

Views: 5769

Answers (1)

mccannf
mccannf

Reputation: 16659

It is possible to create a div dynamically and make it droppable.

You can either create the div through JQuery and then make it droppable, or create a droppable div when the drag event begins on a draggable element and that element can be dropped on the new div created. This is possible like so:

$( "<div>Dynamic Droppable Div</div>" ).droppable( dropOptions ).appendTo( "#anotherDiv" );

Fiddle here.

Upvotes: 6

Related Questions