天天看點

jQuery EasyUI 拖放 - 建立拖放的購物車

如果您能夠通過您的 Web 應用簡單地實作拖動和放置,您就會知道一些特别的東西。通過 jQuery EasyUI,我們在 Web 應用中可以簡單地實作拖放功能。

在本教程中,我們将向您展示如何建立一個啟用使用者拖動和放置使用者想買的商品的購物車頁面。購物籃中的物品和價格将更新。

jQuery EasyUI 拖放 - 建立拖放的購物車

正如您所看到的上面的代碼,我們添加一個包含一些 <li> 元素的 <ul> 元素來顯示商品。所有商品都有名字和價格屬性,它們包含在 <p> 元素中。

我們使用資料網格(datagrid)來顯示購物籃中的物品。

請注意,我們把 draggable 屬性的值從 'proxy' 設定為 'clone',是以拖動元素将由克隆産生。

每當放置商品的時候,我們首先得到商品名稱和價格,然後調用 'addProduct' 函數來更新購物籃。

jeasyui-dd-shopping.zip