Drag Drop Shopping Cart using jQuery and Knockout

Today many of the shopping websites have the drag drop shopping cart facility.
The drag drop of items to the cart is a easy to use and quick way of shopping.
In this article we will learn to build a drag drop shopping cart using jQuery and Knockout.

Steps to build the drag drop shopping cart

Knockout ViewModel
Create a knockout viewmodel to get the products data and store the shopping cart data. Populate the products data using a ajax call. Below code gets the data from a sample txt file in json format.

$.getJSON("productsData.txt", function (data) {
	viewModel.shoppingCartArray = ko.observableArray();
	viewModel.products = ko.mapping.fromJS(data);
	viewModel.removeProduct = function(data){
		viewModel.shoppingCartArray.remove(data);
	};		
	ko.applyBindings(viewModel);
});

$.getJSON("productsData.txt", function (data) {

viewModel.shoppingCartArray = ko.observableArray();

viewModel.products = ko.mapping.fromJS(data);

viewModel.removeProduct = function(data){

viewModel.shoppingCartArray.remove(data);

};

ko.applyBindings(viewModel);

});

Display the list of products
Once the products are populated, display them to the user using the knockout databinding.

<div id="products">
	<ul class="productList" data-bind="foreach: products">
		<li>
			<a href="#" class="product">
				<img data-bind="attr:{src: image}" />  
				<div>
					<p data-bind="text:name"></p>
					<p data-bind="text:'$ '+price()"></p>
				</div>
			</a>
		</li>
	</ul>
</div>

<li>

<div>

</div>

</a>

</li>

</ul>

</div>

Create Shopping cart
Create a shopping cart div and using the knockout databind. This will ensure that any data added to the cart will automatically bind to the shopping cart array in viewmodel

<div class="shoppingCart" id="shoppingCart">
<h2>Shopping Cart</h2>
<div class="placeholder"></div>
<table>
<thead>
	<tr>
	<th width="50px">&nbsp;</th>
	<th width="100px">Name</th>
	<th width="100px">Price</th>
	</tr>
</thead>
<tbody data-bind="foreach:shoppingCartArray">
	<tr>
	<td width="100px"><a href="#" data-bind="click: $parent.removeProduct">Remove</a></td>
	<td width="100px" data-bind="text:name"></td>
	<td width="100px" data-bind="text:price"></td>              
	</tr>
</tbody>
</table>    
</div>

<h2>Shopping Cart</h2>

<table>

<thead>

<tr>

<th width="100px">Price</th>

</tr>

</thead>

<tr>

<td width="100px"><a href="#" data-bind="click: $parent.removeProduct">Remove</a></td>

</tr>

</tbody>

</table>

</div>

Enabling Drag

$( "#products li" ).draggable({
	appendTo: "body",
	helper: "clone"
});

$( "#products li" ).draggable({

appendTo: "body",

helper: "clone"

});

Enabling Drop

$( "#shoppingCart" ).droppable({
	activeClass: "ui-state-default",
	hoverClass: "ui-state-hover",
	accept: ":not(.ui-sortable-helper)",
	drop: function( event, ui ) {
		var name = ui.draggable.find('p:eq(0)').html();
		var price = ui.draggable.find('p:eq(1)').html();					
		addToShoppingCart(name,price);
	}
});

$( "#shoppingCart" ).droppable({

activeClass: "ui-state-default",

hoverClass: "ui-state-hover",

accept: ":not(.ui-sortable-helper)",

drop: function( event, ui ) {

var name = ui.draggable.find('p:eq(0)').html();

var price = ui.draggable.find('p:eq(1)').html();

addToShoppingCart(name,price);

}

});

Populating the shopping cart using knockout

function addToShoppingCart(name,price){
        viewModel.shoppingCartArray.push({
		name:name,
		price:price			
	});
};

function addToShoppingCart(name,price){

viewModel.shoppingCartArray.push({

name:name,

price:price

});

};

Removing products from cart

viewModel.removeProduct = function(data){
	viewModel.shoppingCartArray.remove(data);
};

viewModel.removeProduct = function(data){

viewModel.shoppingCartArray.remove(data);

};

And your Drag Drop Shopping cart is ready.

View Demo