购物车结帐使用JQuery draggable + droppable?

时间:2011-08-29 05:16:46

标签: jquery ruby-on-rails ruby-on-rails-3 jquery-ui draggable

我正在尝试制作一个拖放购物车并调查了两个选项:JQuery UI draggableScriptaculous Draggable + Rails Helpers,但我很难将控制器操作与已拖入的项目绑在一起购物车。

E.g。我希望用户将商品拖入购物车div,然后点击“结帐”并继续提供所有商品的付款信息等等。

目前在我的数据库中,我有一个列,它接受他们想要作为哈希购买的多个项目ID。我也将它设置为隐藏字段的表单,但这可能不是最好的选择。

关于如何实现这一目标的任何想法?如果可能的话,示例代码将是很棒的。非常感谢你的帮助!

1 个答案:

答案 0 :(得分:3)

JQuery UI Droppable可以正常运行。这里有一个用于购物车的例子:

http://jqueryui.com/demos/droppable/#shopping-cart

要与Rails 3集成,一种方法是将页面视为传统(非AJAX)Web表单,但使用Javascript来操作隐藏的输入元素。

  1. 使用JSON用您的数据(您的数据模型)填充JavaScript数组/对象
  2. 使用Javascript与JQuery操作模型
  3. 使用小型Javascript函数将模型写入为Rails正确命名的隐藏输入元素 - 每次更改数据时都会运行该函数
  4. 点击提交按钮时,照常提交表单