Creating a shopping cart from the Draggable

Creating a shopping cart from the Draggable

Hi all, -> demo http://bit.ly/9WxRiY

I am having problems with using the draggable shopping cart. The value is automatically being added to the total before the item has been dragged to the required area. However, when I add an alert, the alert isnt called until i drag. Which confuses me to why would the value be added to the total? :-/

Firstly I have created a function which updates the Total. 'input:checked, .input2,' are checkboxes and radio buttons that update on click

  1. function calcTotal()
  2.                                 {
  3.                                 var total = 0;
  4.                                     $("input:checked, .input2, li.test2").each(function()
  5.                                     {
  6.                                    
  7.                                         //This happens for each checked input field
  8.                                         var value = $(this).attr("value");
  9.                                         //alert(value);
  10.                                         total += parseInt(value);
  11.                                     });
  12.                                     $("p.total").html("Total: <strong>" + total + "</strong>");
  13.                                 }
Secondly, I have then added the function calcTotal() to the draggable code:

  1. $("#catalog li").draggable({
  2.             appendTo: "body",
  3.             helper: "clone"
  4.         });
  5.         $("#cart ol").droppable({
  6.             activeClass: "ui-state-default",
  7.             hoverClass: "ui-state-hover",
  8.             accept: ":not(.ui-sortable-helper)",
  9.             drop: function(event, ui) {
  10.                 $(this).find(".placeholder").remove();
  11.                 $("<li></li>").text(ui.draggable.text()).appendTo(this);
  12.                 //alert('handle');
  13.                 calcTotal()
  14.             }
  15.         }).sortable({
  16.             items: "li:not(.placeholder)",
  17.             sort: function() {
  18.                 // gets added unintentionally by droppable interacting with sortable
  19.                 // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
  20.                 $(this).removeClass("ui-state-default");
  21.             }
  22.         });

HTML code for the drag-drop:

  1.  <div id="products">
  2.                     <h1 class="ui-widget-header">Products</h1>   
  3.                     <div id="catalog">
  4.                         <h3><a href="#">T-Shirts</a></h3>
  5.                         <div>
  6.                             <ul>
  7.                                 <li class="test2" value="0">test</li>
  8.                                 <li class="test2" value="0">Cheezeburger Shirt</li>
  9.                                 <li class="test2" value="1">Buckit Shirt</li>
  10.                             </ul>
  11.                         </div>
  12.                         <h3><a href="#">Bags</a></h3>
  13.                         <div>
  14.                             <ul>
  15.                                 <li>Zebra Striped</li>
  16.                                 <li>Black Leather</li>
  17.                                 <li>Alligator Leather</li>
  18.                             </ul>
  19.                         </div>
  20.                         <h3><a href="#">Gadgets</a></h3>
  21.                         <div>
  22.                             <ul>
  23.                                 <li>iPhone</li>
  24.                                 <li>iPod</li>
  25.                                 <li>iPad</li>
  26.                             </ul>
  27.                         </div>
  28.                     </div>
  29.                 </div>
  30.                
  31.                 <div id="cart">
  32.                     <h1 class="ui-widget-header">Shopping Cart</h1>
  33.                     <div class="ui-widget-content">
  34.                         <ol>
  35.                             <li class="placeholder">Add your items here</li>
  36.                         </ol>
  37.                     </div>
  38.             </div>

All advice welcome

Thank you














    • Topic Participants

    • info