Search code examples
jquery-uidraggablejquery-ui-droppable

jQuery UI droppable float back

I am building an app utilizing jQuery UI draggable/droppable.

I need to drag boxes from the left into target boxes on the right. It works fine, however if a value box id dropped not on any target boxes it needs to float back into the left-side section.

It sort of works if I drag it a little and then release but when it is further away it just sits there. I've added 

$(".card").draggable({ revert: "invalid" });

but it does not seem to help. What am I missing?

Here's DEMO.

Solution

  • I think based on your demo that your draggable is not reverting because it's actually hitting a valid droppable target (the #dropZone element in your demo, which is essentially the background).

    You can fix it by not turning that element into a droppable or by making it's drop handler "revert" the draggable element itself.