revert 'invalid' with grid doesn't return to start position with jQuery UI Draggable

Question

In a nutshell, if you use draggable with a grid and set revert: 'invalid' on draggable items they don't return to exactly the same place you started dragging them from. They return to a place close to where you started dragging them...pretty weird.

This could well be a bug in UI. If so, does anyone know if there's a workaround for it?

Example: http://jsfiddle.net/n2AUv/11/

Thanks! John.

Answer 1

grid option documentation says:

Snaps the dragging helper to a grid, every x and y pixels.

So it looks like grid was designed to be used only with some kind of helper. And really, if you use helper: "clone" things are good: helper returns near the place of original instance and

Yes, this looks like a bug in UI. But there's a workaround: use helper for dragging:

$(".dragme").draggable({
    revert: true,
    helper: "clone",
    grid: [50,50]
});

This workaround introduces other weird bug: after a valid drop on droppable area helper gets destroyed and original instance exists in it's place (you can see it at fiddle).

This bug somehow solved for draggable with connectToSortable options. Maybe it's possible to solve the bug in your case too.

Also, I suspect the whole mess is because of this chunk of code in draggable.