我們今天這個例子是基于droppable里的simple photo manager做出來的。。。
這個代碼,我們用來實現拖動,cancel表示對于樣式名為ui-icon的元素就不可以拖動,而revert表示可以返回,containment表示我們的拖動只能基于當前文檔,helper那里,其實可以寫上拖動的地方,但我們這里表示復制。。
這個表示我們的購物車允許放東西,accept表示的是從id為gallery里來的li,拖動進來后就加上樣式名ui-state-highlight,放的時候有一個function drop,記得把參數寫上去。。
關于deleteImage這一塊,我們做了修改。。
我們在拖動時,用clone來實現復本,這樣更符合我們在商城里的例子,對于end函數,我在JQ API里得知,它表示事件結束,返父節點,比如上面的就是說又從$(this)開始。。。
你們可以看到,我們的計費,是采用each這個函數來實現的,toFixed(2)用來表示我們保留兩位小數。。。
這里是購物車的刪除功能,同樣,我們也是采用each來實現刪除計價,我在百度上看到許多人的做法是通過個數的減少,再乘以單價實現自動計價的,我們也差不多,也就是判斷商品個數,實現計價。。。
這是我們用來實現彈窗放大效果的代碼,當然了,這是jquery ui的另一個功能,因此,這個購物車,包含了jquery ui的幾個重要功能,拖放,彈窗。。。
大家提出加上清空購物車,我就加多一個功能啦。。。
以下是我制作的效果截圖:
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。