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 sec开发者_如何学JAVAtion.

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.

---

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.