构建一个拖放购物车

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

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

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

在页面上显示产品:

正如您在上面的代码中看到的,我们添加了一个ul元素,该元素包含一些元素来显示产品, 每种产品的名称和价格都包含在损益表中元素

Build the cart:

我们使用datagrid来显示购物篮中的项目.

拖动复制产品:

请注意,我们将可拖动属性“proxy”设置为“clone”,因此所拖动的元素将具有克隆效果.

将选定的产品放入购物车

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

下载 EasyUI 实例:

easyui-shopping-demo.zip