Drag and drop shopping cart

Hi,

I am compiled this script where the users can simply drag and drop products to shopping cart. For this jQuery has been used. The important thing to keep in mind are the syntax which makes an item draggable and an item droppable. You will find the entire source code at the end of this post, featuring the shopping cart functionality. So the things to keep in mind are:


$( ".draggable" ).draggable({ opacity: 0.7, helper: "clone",
start: function(){
...................
        .....................
       },
});


The above draggable function makes the element whose class name is "draggable", a draggable element. Same goes for the element where I am dropping:


$( ".drop_zone" ).droppable({
drop: function( event, ui ) {
.....................
}
})

Apart from this everything else is just basic PHP concepts of shopping cart. Here is what happens:

When the products are dragged and dropped in the shopping cart box it gets added in the cart as:

The vital part in this is the drag and drop. Whenever an item is dropped in the shopping cart a function is called where I have put the ajax call. The event to call the function is as follows:




$( ".drop_zone" ).droppable({
drop: function( event, ui ) {
add_to_cart();
}
})

Click here to download the full source code.

Cheers!!