jQuery UI Droppable: How to Implement a Shopping Cart Interface using jQuery UI Droppable

jQuery in Action: Build 15 jQuery Projects

jQuery UI in Action: Build 9 jQuery UI Projects

Hands-On jQuery: jQuery Examples

Find all our Udemy courses here:

jQuery UI Droppable: How to Implement a Shopping Cart Interface using jQuery UI Droppable

It is very easy to create a shopping cart interface using jQuery UI. You can make the products draggable and the shopping cart area droppable using jQuery UI draggable() and droppable() methods. For more clarity, we have displayed the list of products as an accordion.

To know how to write jQuery code easily, see this video:

To know how to reference jQuery UI files correctly, see the video at

[rawatdeepesh]

Hello Shiji John V,
Thanks for the nice tutorial.
Is there a way to let the draggables be dragged back to the accordian or removed from the containment container(shopping cart), if the customer changes his mind and wants to remove the item from the cart and place it back into the cart after sometime?

[RockstahRolln]

Many thanks for the wonderful video! Your explanation was very clear and understandable.

[nidhimakdani]

hello i added this code in aspx file it droppable cant work please give solution