title: Jquery Shopping Cart Drag & Drop
body: <p>I found this website, with great shopping cart :
  <a href="http://superdit.com/2011/04/02/drag-drop-shopping-cart-using-jquery/comment-page-1/#comment-27491" rel="nofollow">http://superdit.com/2011/04/02/drag-drop-shopping-cart-using-jquery/comment-page-1/#comment-27491</a></p>
  
  <p>Instead of having 1 shopping cart, i'd like to have 2.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;JQuery Drag &amp; Drop Cart&lt;/title&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      body {
          font-family: Arial, "Free Sans";
          margin: 0;
          padding: 0;
      }
      #main {
          background: #0099cc;
          margin-top: 0;
          padding: 2px 0 4px 0;
          text-align: center;
      }
      #main a {
          color: #ffffff;
          text-decoration: none;
          font-size: 12px;
          font-weight: bold;
          font-family: Arial;
      }
      #main a:hover {
          text-decoration: underline;
      }
      #item_container {
          width: 610px;
          margin: 0 auto;
          margin-top: 10px;
          margin-bottom: 10px;
      }
      .item {
          background: #fff;
          float: left;
          padding: 5px;
          margin: 5px;
          cursor: move;
          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
          -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
          box-shadow: 0 1px 2px rgba(0,0,0,.5);
          -webkit-border-radius: .5em;
          -moz-border-radius: .5em;
          border-radius: .5em;
          z-index: 5;
      }
      .title, .price {
          display: block;
          text-align: center;
          font-size: 14px;
          letter-spacing: -1px;
          font-weight: bold;
          cursor: move;
      }
      .title {
          color: #333;
      }
      .price {
          color: #0099cc;
          margin-top: 5px;
          -webkit-border-radius: .5em;
          -moz-border-radius: .5em;
          border-radius: .5em;
      }
      .icart, .icart label {
          cursor: e-resize;
      }
      .divrm {
          text-align: right;
      }
      .remove {
          text-decoration: none;
          cursor: pointer;
          font-weight: bold;
          font-size: 20px;
          position: relative;
          top: -7px;
      }
      .remove:hover {
          color: #999;
      }
      .clear {
          clear: both;
      }
      #cart_container {
          margin: 0 auto;
          width: 495px;
      }
      #cart_title span {
          border: 8px solid #666;
          border-bottom-width: 0;
          background: #333;
          display: block;
          float: left;
          color: #fff;
          font-size: 11px;
          font-weight: bold;
          padding: 5px 10px;
          -webkit-border-radius: .5em .5em 0 0;
          -moz-border-radius: .5em .5em 0 0;
          border-radius: .5em .5em 0 0;
      }
      #cart_toolbar {
          overflow: hidden;
          border: 8px solid #666;
          height: 190px;
          z-index: -2;
          width: 483px;
          -webkit-border-radius: 0 .5em 0 0;
          -moz-border-radius: 0 .5em 0 0;
          border-radius: 0 .5em 0 0;
          background: #ffffff;
      }
      #cart_items {
          height: 190px;
          width: 483px;
          position: relative;
          padding: 0 0 0 2px;
          z-index: 0;
          cursor: e-resize;
          border-width: 0 2px;
      }
      .back {
          background: #e9e9e9;
      }
      #navigate {
          width: 463px;
          margin: 0 auto;
          border: 8px solid #666;
          border-top-width: 0;
          -webkit-border-radius: 0 0 .5em .5em;
          -moz-border-radius: 0 0 .5em .5em;
          border-radius: 0 0 .5em .5em;
          padding: 10px;
          font-size: 14px;
          background: #333;
          font-weight: bold;
      }
      #nav_left {
          float: left;
      }
      #nav_left a {
          padding: 4px 8px;
          background: #fff;
          -webkit-border-radius: .5em;
          -moz-border-radius: .5em;
          border-radius: .5em;
          text-decoration: none;
          color:#0099cc;
      }
      #nav_left a:hover {
          background: #666;
          color: #fff;
      }
      #nav_right {
          float: right;
      }
      .sptext {
          background: #ffffff;
          padding: 4px 8px;
          margin-left: 8px;            
          -webkit-border-radius: .5em;
          -moz-border-radius: .5em;
          border-radius: .5em;
          color: #666;
      }
      .count {
          color: #0099cc;
      }
      .drop-active {
          background: #ffff99;
      }
      .drop-hover {
          background: #ffff66;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  var total_items = 0;
  var total_price = 0;
  $(document).ready(function() {
  
      $(".item").draggable({
          revert: true            
      });
      $("#cart_items").draggable({
          axis: "x"
      });
  
      $("div[id^='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 = '&lt;div class="item icart"&gt;';
              html = html + '&lt;div class="divrm"&gt;';
              html = html + '&lt;a onclick="remove(this)" class="remove '+itemid+'"&gt;&amp;times;&lt;/a&gt;';
              html = html + '&lt;div/&gt;'+item+'&lt;/div&gt;';
              $(this).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 &gt; 4) {
                 $(this).animate({width: "+=120"}, 'slow');
              }
          }
      });
  
  
      $("#btn_next").click(function() {
          $("#cart_items").animate({left: "-=100"}, 100);
          return false;
      });
      $("#btn_prev").click(function() {
          $("#cart_items").animate({left: "+=100"}, 100);
          return false;
      });
      $("#btn_clear").click(function() {
          $("#cart_items").fadeOut("2000", function() {
             $(this).html("").fadeIn("fast").css({left: 0});
          });
          $("#citem").html("0");
          $("#cprice").html("$ 0");
          total_items = 0;
          total_price = 0;
          return false;
      });
  });
  function remove(el) {
      $(el).hide();
      $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
      $(el).parent().parent().fadeOut('1000');
      setTimeout(function() {
          $(el).parent().parent().remove();
          // collapse cart items
          if (total_items &gt; 3) {
              $("#cart_items").animate({width: "-=120"}, 'slow');
          }
      }, 1100);
  
      // update total item
      total_items--;
      $("#citem").html(total_items);
  
      // update totl price
      var price = parseInt($(el).parent().parent().find(".price").html().replace("$ ", ""));
      total_price = total_price - price;
      $("#cprice").html("$ " + total_price);
  }
  &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div id="item_container"&gt;
        &lt;div class="item" id="i1"&gt;
            &lt;img src="img/1.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 1&lt;/label&gt;
            &lt;label class="price"&gt;$ 20&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="item" id="i2"&gt;
            &lt;img src="img/2.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 2&lt;/label&gt;
            &lt;label class="price"&gt;$ 24&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="item" id="i3"&gt;
            &lt;img src="img/3.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 3&lt;/label&gt;
  
            &lt;label class="price"&gt;$ 18&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="item" id="i4"&gt;
            &lt;img src="img/4.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 4&lt;/label&gt;
            &lt;label class="price"&gt;$ 30&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="item" id="i5"&gt;
            &lt;img src="img/5.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 5&lt;/label&gt;
            &lt;label class="price"&gt;$ 28&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="item" id="i6"&gt;
            &lt;img src="img/6.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 6&lt;/label&gt;
  
            &lt;label class="price"&gt;$ 26&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="item" id="i7"&gt;
            &lt;img src="img/7.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 7&lt;/label&gt;
            &lt;label class="price"&gt;$ 35&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="item" id="i8"&gt;
            &lt;img src="img/8.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 8&lt;/label&gt;
            &lt;label class="price"&gt;$ 33&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="item" id="i9"&gt;
            &lt;img src="img/9.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 1&lt;/label&gt;
  
            &lt;label class="price"&gt;$ 12&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="item" id="i10"&gt;
            &lt;img src="img/10.jpg"/&gt;
            &lt;label class="title"&gt;T-Shirt 10&lt;/label&gt;
            &lt;label class="price"&gt;$ 22&lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cart_container"&gt;
        &lt;div id="cart_title"&gt;
            &lt;span&gt;Shopping Cart&lt;/span&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="cart_toolbar"&gt;
  
            &lt;div id="cart_items1" class="back"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="navigate"&gt;
            &lt;div id="nav_left"&gt;
                &lt;a href="" id="btn_prev"&gt;&lt;&lt;/a&gt;
                &lt;a href="" id="btn_next"&gt;&gt;&lt;/a&gt;
                &lt;a href="" id="btn_clear"&gt;Clear Cart&lt;/a&gt;
  
            &lt;/div&gt;
            &lt;div id="nav_right"&gt;
                &lt;span class="sptext"&gt;
                    &lt;label&gt;Items &lt;/label&gt;&lt;label class="count" id="citem"&gt;0&lt;/label&gt;
                &lt;/span&gt;
                &lt;span class="sptext"&gt;
                    &lt;label&gt;Price &lt;/label&gt;&lt;label class="count" id="cprice"&gt;$ 0&lt;/label&gt;
  
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="cart_container"&gt;
        &lt;div id="cart_title"&gt;
            &lt;span&gt;Shopping Cart&lt;/span&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="cart_toolbar"&gt;
  
            &lt;div id="cart_items2" class="back"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="navigate"&gt;
            &lt;div id="nav_left"&gt;
                &lt;a href="" id="btn_prev"&gt;&lt;&lt;/a&gt;
                &lt;a href="" id="btn_next"&gt;&gt;&lt;/a&gt;
                &lt;a href="" id="btn_clear"&gt;Clear Cart&lt;/a&gt;
  
            &lt;/div&gt;
            &lt;div id="nav_right"&gt;
                &lt;span class="sptext"&gt;
                    &lt;label&gt;Items &lt;/label&gt;&lt;label class="count" id="citem"&gt;0&lt;/label&gt;
                &lt;/span&gt;
                &lt;span class="sptext"&gt;
                    &lt;label&gt;Price &lt;/label&gt;&lt;label class="count" id="cprice"&gt;$ 0&lt;/label&gt;
  
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My problem is, my cart don't change color, and are not dropable
  Could you help please</p>