Social Networks

HTML 5 is rocking guys ! In shopping Cart most of the time you have seen add and remove functionality of the items in your card. Like Google drag and drop if you can implement drag and drop style in your shopping cart site that will look great.

Find Geo Location with HTML5 and JQuery

With the combination of HTML 5,  JQuery and CSS 3 I found one great demo. Here you can –

1) Download the script

2) View the online Demo

3) Implementation Guide

Click on below image to vie the live demo –

html5-drag-drop-demo-image

HTML Page

<ul id="products">
<li><a class="item" href="#" id="imac" draggable="true">
<img src="images/imac.png" />
<div>
<p><strong>iMac</strong></p>
<p><strong>Price</strong>: <span>$1199.00</span></p>
<p><strong>Quantity</strong>: <span>10</span></p>
</div>
</a></li>
<li><a class="item" href="#" id="iphone" draggable="true">
<img src="images/iphone.png" />
<div>
<p><strong>iPhone</strong></p>
<p><strong>Price</strong>: <span>$199.00</span></p>
<p><strong>Quantity</strong>: <span>16</span></p>
</div>
</a></li>
<li><a class="item" href="#" id="appletv" draggable="true">
<img src="images/appletv.png" />
<div>
<p><strong>AppleTV</strong></p>
<p><strong>Price</strong>: <span>$299.00</span></p>
<p><strong>Quantity</strong>: <span>9</span></p>
</div>
</a></li>
<li><a class="item" href="#" id="dislpay" draggable="true">
<img src="images/display.png" />
<div>
<p><strong>Cinema Display</strong></p>
<p><strong>Price</strong>: <span>$899.00</span></p>
<p><strong>Quantity</strong>: <span>4</span></p>
</div>
</a></li>
<li><a class="item" href="#" id="nano" draggable="true">
<img src="images/nano.png" />
<div>
<p><strong>iPod Nano</strong></p>
<p><strong>Price</strong>: <span>$149.00</span></p>
<p><strong>Quantity</strong>: <span>20</span></p>
</div>
</a></li>
<li><a class="item" href="#" id="macbook" draggable="true">
<img src="images/macbook.png" />
<div>
<p><strong>Macbook</strong></p>
<p><strong>Price</strong>: <span>$1199.00</span></p>
<p><strong>Quantity</strong>: <span>13</span></p>
</div>
</a></li>
<li><a class="item" href="#" id="mini" draggable="true">
<img src="images/mini.png" />
<div>
<p><strong>Mac Mini</strong></p>
<p><strong>Price</strong>: <span>$599.00</span></p>
<p><strong>Quantity</strong>: <span>18</span></p>
</div>
</a></li>
</ul>
<div id="cart">
<h1>Shopping Cart</h1>
<ul></ul>
<p id="total"><strong>Total:</strong> $<span>0.00</span></p>
<h2>Drop here to add to cart</h2>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.ndd.js"></script>
<script src="jsdemodraganddrop.js"></script>

JavaScript Page

$('.item')
.bind('dragstart', function (evt) {
evt.dataTransfer.setData('text', this.id);
$('h2').fadeIn('fast');
})
.hover(
function () { $('div', this).fadeIn(); }, 
function () { $('div', this).fadeOut(); }
);

$('#cart')
.bind('dragover', function (evt) {
evt.preventDefault();
})
.bind('dragenter', function (evt) {
evt.preventDefault();
})
.bind('drop', function (evt) {
var id = evt.dataTransfer.getData('text'),
item = $('#' + id),
cartList = $("#cart ul"),
total = $("#total span"),
price = $('p:eq(1) span', item).text(),
prevCartItem = null,
notInCart = (function () {
var lis = $('li', cartList),
len = lis.length,
i;

for (i = 0; i < len; i++ ) {
var temp = $(lis[i]);
if (temp.data('id') === id) {
prevCartItem = temp;
return false;
}
}
return true;
} ()),
quantLeftEl, quantBoughtEl, quantLeft;

$("h2").fadeOut('fast');

if (notInCart) {
prevCartItem = $('<li />', {
text : $('p:first', item).text(),
data : { id : id }
}).prepend($('<span />', {
'class' : 'quantity',
text : '0'
})).prepend($('<span />', {
'class' : 'price',
text : price
})).appendTo(cartList);
}

quantLeftEl = $('p:last span', item);
quantLeft   = parseInt(quantLeftEl.text(), 10) - 1;
quantBoughtEl = $('.quantity', prevCartItem);
quantBoughtEl.text(parseInt(quantBoughtEl.text(), 10) + 1);
quantLeftEl.text(quantLeft);

if (quantLeft === 0) {
item.fadeOut('fast');
}

total.text((parseFloat(total.text(), 10) + parseFloat(price.split('$')[1])).toFixed(2));

evt.stopPropagation();
return false;
});

Download Script

download script

View online Demo

live-demo-tech-blog

  1. Firstly you can download these liberary and link in your project:

    Displaying products on the page:
    Build the cart:
    Dragging the cloned product:
    Dropping the selected product in the cart:

    For full implementation refer here:
    < a href="http://www.mindstick.com/blog/721/Build%20a%20Drag%20and%20Drop%20Shopping%20Cart%20using%20HTML5%20Jquery" rel="external nofollow" target="_blank">Build a Drag and Drop Shopping Cart using HTML5 & Jquery

  2. Mate that is so cool. Seriously I’m a freshie with HTML5 but that is bang on what I’ve been hunting for.

    I’m wanting to create a form that includes this drag and drop style which would then be submitted and, via php, be e-mailed on. What would I have to do to attach a value to the the drag and drop sequence that could be sent as form data?

    Any help would be hugely appreciated.

    Cheers

    Rob

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>