jQuery的购物车拖放

我发现这个网站，以极大的购物车： http://superdit.com/2011/04/02/drag-drop-shopping-cart-using-jquery/comment-page-1/#comment-27491 jQuery的购物车拖放

而是具有1个购物车，我想有2

这里是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>JQuery Drag & Drop Cart</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 
<style type="text/css"> 
    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; 
    } 
</style> 
<script type="text/javascript"> 
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 = '<div class="item icart">'; 
      html = html + '<div class="divrm">'; 
      html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>'; 
      html = html + '<div/>'+item+'</div>'; 
      $(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 > 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 > 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); 
} 
</script> 

    </head> 
    <body> 

    <div id="item_container"> 
     <div class="item" id="i1"> 
      <img src="img/1.jpg"/> 
      <label class="title">T-Shirt 1</label> 
      <label class="price">$ 20</label> 
     </div> 

     <div class="item" id="i2"> 
      <img src="img/2.jpg"/> 
      <label class="title">T-Shirt 2</label> 
      <label class="price">$ 24</label> 
     </div> 
     <div class="item" id="i3"> 
      <img src="img/3.jpg"/> 
      <label class="title">T-Shirt 3</label> 

      <label class="price">$ 18</label> 
     </div> 
     <div class="item" id="i4"> 
      <img src="img/4.jpg"/> 
      <label class="title">T-Shirt 4</label> 
      <label class="price">$ 30</label> 
     </div> 

     <div class="item" id="i5"> 
      <img src="img/5.jpg"/> 
      <label class="title">T-Shirt 5</label> 
      <label class="price">$ 28</label> 
     </div> 
     <div class="item" id="i6"> 
      <img src="img/6.jpg"/> 
      <label class="title">T-Shirt 6</label> 

      <label class="price">$ 26</label> 
     </div> 
     <div class="item" id="i7"> 
      <img src="img/7.jpg"/> 
      <label class="title">T-Shirt 7</label> 
      <label class="price">$ 35</label> 
     </div> 

     <div class="item" id="i8"> 
      <img src="img/8.jpg"/> 
      <label class="title">T-Shirt 8</label> 
      <label class="price">$ 33</label> 
     </div> 
     <div class="item" id="i9"> 
      <img src="img/9.jpg"/> 
      <label class="title">T-Shirt 1</label> 

      <label class="price">$ 12</label> 
     </div> 
     <div class="item" id="i10"> 
      <img src="img/10.jpg"/> 
      <label class="title">T-Shirt 10</label> 
      <label class="price">$ 22</label> 
     </div> 

     <div class="clear"></div> 
    </div> 
    <div id="cart_container"> 
     <div id="cart_title"> 
      <span>Shopping Cart</span> 
      <div class="clear"></div> 
     </div> 
     <div id="cart_toolbar"> 

      <div id="cart_items1" class="back"></div> 
     </div> 
     <div id="navigate"> 
      <div id="nav_left"> 
       <a href="" id="btn_prev"><</a> 
       <a href="" id="btn_next">></a> 
       <a href="" id="btn_clear">Clear Cart</a> 

      </div> 
      <div id="nav_right"> 
       <span class="sptext"> 
        <label>Items </label><label class="count" id="citem">0</label> 
       </span> 
       <span class="sptext"> 
        <label>Price </label><label class="count" id="cprice">$ 0</label> 

       </span> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 

    <div id="cart_container"> 
     <div id="cart_title"> 
      <span>Shopping Cart</span> 
      <div class="clear"></div> 
     </div> 
     <div id="cart_toolbar"> 

      <div id="cart_items2" class="back"></div> 
     </div> 
     <div id="navigate"> 
      <div id="nav_left"> 
       <a href="" id="btn_prev"><</a> 
       <a href="" id="btn_next">></a> 
       <a href="" id="btn_clear">Clear Cart</a> 

      </div> 
      <div id="nav_right"> 
       <span class="sptext"> 
        <label>Items </label><label class="count" id="citem">0</label> 
       </span> 
       <span class="sptext"> 
        <label>Price </label><label class="count" id="cprice">$ 0</label> 

       </span> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
    </body> 
</html>

我的问题是，我的车不变色，并且不dropable 你能帮请

来源

2011-08-07 yannou974

在您的标记改变从cart_items1和cart_items2 DIV来cart_items两个，也将努力即

<div id="cart_container"> 
     <div id="cart_title"> 
      <span>Shopping Cart</span> 
      <div class="clear"></div> 
     </div> 
     <div id="cart_toolbar"> 

      <div id="cart_items" class="back"></div> 
.....

来源

2011-08-07 03:56:54 Waqas

jQuery的购物车拖放

回答

相关问题