构建一个拖放购物车

使用教程 » 构建一个拖放购物车

如果您可以轻松地用web应用程序实现拖放,那么您就知道您得到了一些特殊的东西。 使用jQuery EasyUI,我们在web应用程序中具有拖放功能.

在本教程中,我们将向您展示如何构建一个购物车页面,使用户能够拖放他们希望购买的产品。 购物篮的物品和价格将会更新。

在页面上显示产品:

正如您在上面的代码中看到的,我们添加了一个ul元素并在其中添加了一些li元素来展示商品,所有产商品的名称和价格 属性都包含在p元素中。

Build the cart:

我们使用datagrid来显示购物车中的商品.

拖动复制产品:

请注意,我们把draggable属性值从"proxy"设置为"clone",所以拖动元素将由克隆产生。

将选定的产品放入购物车

当我们放置产品时,首先获取产品名称和价格,然后调用“addProduct”函数更新购物篮.

下载 EasyUI 实例:

easyui-shopping-demo.zip

联系我们
手机/微信
18973127736
办公电话
0731-89565588