javascript - Dynamically Create Droppable Element - Stack Overflow

admin管理员组

文章数量:1398761

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 .

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./uciviy/14.

• javascript
• jquery
• jquery-ui-draggable
• jquery-ui-droppable

Share Improve this question Follow edited Dec 15, 2012 at 22:18 Jonathan Wood asked Dec 15, 2012 at 17:21 Jonathan WoodJonathan Wood 67.5k8282 gold badges304304 silver badges532532 bronze badges 7

• Have you thought of making the switch to HTML5 and utilize it's Drag and Drop – bobthyasian Commented Dec 15, 2012 at 17:58
• Yes, but I haven't thought of a way to force all my users to upgrade to HTML5-patible browsers. – Jonathan Wood Commented Dec 15, 2012 at 18:00
• Ah yes, the age-old conundrum. Would you mind sharing some code? Might spark an idea. – bobthyasian Commented Dec 15, 2012 at 18:13
• a demo in jsfiddle would help. Objective isn't entirely clear – charlietfl Commented Dec 15, 2012 at 18:17
• You should be able to make something droppable dynamically. Have a look at this fiddle: jsfiddle/mccannf/28RVN/3 – mccannf Commented Dec 15, 2012 at 19:43

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 6

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.

本文标签： javascriptDynamically Create Droppable ElementStack Overflow