JQuery UI Drag and Drop Animation on Grid

Question

jQuery UI Draggable offers a grid parameter that, when set, will snap your dragged item to the grid. The only problem I am facing is that I still want it to come to life before clicking.

If my grid is [500,500] , then there will be no user feedback until the mouse [500,500] 500 pixels.

Is it possible to make such a “snap to the grid" thing, but also animate at the same time?

Answer 1

I suppose you want you to snap to the grid after the user has finished dragging and dropping. In this case, you can use the drag-and-drop stop event and calculate the element offset.

Suppose you have a draggable contained within the parent element, starting at offset (0, 0), which is the top left corner. Then you apply the regular drag and drop effect to the element, and on stop you calculate its position and snap it to the nearest “cell”.

The code for this will look something like this:

 $(el).draggable({ stop: function(e, ui) { var elem = ui.helper, left = elem.position().left, top = elem.position().top; elem.css({ left: left - (left%10), top: top - (top%10) }); } }); 

This code will always be attached to the element of the upper left coordinate of the pixel and will rely on an absolutely fixed element, and the parent element is not statically located (relative, absolute, etc.).

** Change **

I created a quick demo - http://jsfiddle.net/LQwMe/1/