I am looking for advice from all you wonderful people on the best way to do snapping drag and drop.
As part of a simple board game I am currently coding in JS (using jQuery for effects) users should be able to drag tiles from a dock onto a grid.
How does one complete the following objectives (preferably using jQuery).
- Enable drag and drop onto the grid
- Ensure during drag and drop items snap to each square of the grid
- If the tile is placed completely off the grid, return to original place (dock)
- If the tile is over the grid (at this point snapped), return current x & y to a function
- Make any tiles being dragged slightly transparent, and go full color once in place or returned to dock
Sorry to ask such a big question, I just can't find any accurate advice online that would be me achieve this!
Many thanks,
Edit: THE ANSWERS
1&2 are solved by "draggable": http://jqueryui.com/demos/draggable
3 is solved by "droppable" http://jqueryui.com/demos/droppable
4 is solved by the above to validate and then $(this).position.left && $(this).position.top
5 is solved by a simple $(this).css({opacity:0.5}) inside start on drag and the opposite on finish drag
Simples!