1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // First, set up the shopping cart // Give the cart an ID that we can reference in the jQuery code // Give each span an ID so we can easily update the text in it <img src="cart.jpg" id=cart> <p><span id=numItems>0</span> items in your cart. <p>Your total is $<span id=totalPrice>0</span>. // Each product has code that looks like this. The entire product // is wrapped in a DIV with a class of "product" and given a // unique ID. It also has a span that defines the price of the object. <p><div class=product id=ban><img src="banana.jpg" align=left> Bananas <p>$<span class=price>1.99</span></div><br><br> // define each DIV that has a "product" as "draggable" // The draggable function has many options that define how the object // will look and feel when dragged. There are many options, most not // covered here, but I put a sampling in to whet your appetite. $(".product").draggable({ 'opacity': 0.3, // make the object semi-transparent when dragged 'revert': "valid", // snap the object back after it's been dropped 'delay': 200, // delay 200 ms before starting to drag it 'distance':4, // wait till it's been dragged 4 pixels before starting 'helper':"clone" // keep the object where it is and use a helper to show dragging }); // just like the draggable has many options, the droppable has many // options as well. These options provide a variety of ways // to offer reinforcement to the user about how the draggable/droppable // relationship is to work $("#cart").droppable({ 'accept':".product", // define which elements will trigger a 'drop' 'activeClass':"border", // what class to add to the droppable while dragging 'drop': function(e,ui){ // this function gets called when something is dropped // update the number of items in the cart $("#numItems").text(new Number($("#numItems").text())+1); var ID = $(ui.draggable).attr("id"); // get the price from the object just placed in the cart var price = new Number($("#"+ID + " .price").text()); // update the total price in the cart $("#totalPrice").text(new Number($("#totalPrice").text())+price); } }); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |