JavaScript& jQuery的;如何做抓取拖放 [英] JavaScript & jQuery; how to do snapping drag and drop
问题描述
作为简单的棋盘游戏的一部分，我目前正在编码在JS（使用jQuery的效果）中，用户应该能够将拼贴从拖尾拖到网格上。
如何完成以下目标（最好使用jQuery）。
- 启用拖放到网格上
- 确保拖动并将物品扣入每个平方格的网格
- 如果平铺完全放置在网格之外，则返回到原始位置（dock）
- 如果瓦片在网格上（在此点被拍摄），返回电流x& y功能
- 使任何瓷砖被拖动轻微透明，并且全部颜色一次就到位或返回到码头。
对不起，问这样一个大问题，我在网上找不到任何准确的建议，这将是我实现的！
非常感谢，
编辑：答案
1& 2由可拖动 ： http://jqueryui.com/demos/draggable
3被解决了droppable http://jqueryui.com/demos/droppable
4是通过上述方法解决，然后 $（this）.position.left && $（this）.position.top
5由一个简单的 $（this）.css（{opacity： 0.5}）内部开始拖动，相反的完成拖动
Simples！
有关互动的演示：
我希望这些演示可以帮助你。
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!
There are demos about Interactions :
I hope these demos can help you.
这篇关于JavaScript& jQuery的;如何做抓取拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
