There are a mess excercise about making move and customize shopping truck, in this post I need to impart my variant still to Jquery, yet the diverse is this sample just indicates the code on the customer side, which mean all of information are hardcoded on the html, and numbering cost and all out things will be handle by javascript.
The Html
Default Item List
Like I said there is no server side scripting, so this code only a hardcoded thing record, this case utilize 10 things, however the code beneath shows just two to make it straightforward.
T-Shirt 1
$ 20
T-Shirt 2
$ 24
</div>
Shopping Cart
In shopping truck component, there are component for dropped thing zone, this range will be draggable so all the things could be demonstrated and there additionally a go for clearing truck, downright things and downright cost.
The Jquery
Intializing The Cart
This instating code for setting up the draggable thing on thing record, draggable shopping truck and the
movement after a thing dropped on the truck such as upgrading sum thing, sum cost and setting up evacuate connect in every thing.
var total_items = 0;
var total_price = 0;
$(document).ready(function() {
$(“.item”).draggable({
revert: true
});
$(“#cart_items”).draggable({
axis: “x”
});
$(“#cart_items”).droppable({
accept: “.item”,
activeClass: “drop-active”,
hoverClass: “drop-hover”,
drop: function(event, ui) {
var item = ui.draggable.html();
var itemid = ui.draggable.attr(“id”);
var html = ‘
html = html + ‘
html = html + ‘ב;
html = html + ‘
‘;
$(“#cart_items”).append(html);
// update total items
total_items++;
$(“#citem”).html(total_items);
// update total price
var price = parseInt(ui.draggable.find(“.price”).html().replace(“$ “, “”));
total_price = total_price + price;
$(“#cprice”).html(“$ ” + total_price);
// expand cart items
if (total_items > 4) {
$(“#cart_items”).animate({width: “+=120”}, ‘slow’);
}
}
});
});
Reblogged this on Abdulhafeez Dangusau's Blog.