Dynamically Create Droppable Element

Question

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.

Answer 1

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.