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屋!