javascript - 购物车 : Sum on drop event (JQuery)

Question

我目前正在创建一个带有可放置和可拖动元素的购物车。每个元素都有一个值(价格)，当放入目标中时，该值将显示在输入字段中。 这是我的 fiddle :https://jsfiddle.net/SamyAbouseda/jhchfwzg/

HTML

<div id="draggable" class="ui-widget-content" data-product="455">
<p>Product 1</p>
<p>455$</p>
</div>

<div id="draggable2" class="ui-widget-content" data-product="37">
<p>Product 2</p>
<p>37$</p>
</div>

<div id="droppable" class="ui-widget-header">
<p>Shopping Cart</p>
</div>
<input id="sum" type="text"><span>$</span>

jQuery

$("#draggable, #draggable2").draggable();
$("#droppable").droppable({
  drop: function(event, ui) {
    console.log(ui.draggable.length);
    $('input').val(ui.draggable.data('product'));
    $(this).addClass("ui-state-highlight").find("p").html("Product added to your cart!");
 }
});

现在，目标是当多个元素被放入目标中时，这些元素的总和应显示在输入字段中。

我找到了这个shopping cart这几乎是期望的结果，除了我需要将放置的元素显示在目标中(根据我当前的购物车)。我尝试摆弄它，将其添加到我的代码中，多次从头开始，但除了对此感到疯狂之外，我找不到解决方案。

我是 JQuery 新手，还不太适应它。任何形式的帮助都会很棒!

Answer 1

进一步，您的第二个 fiddle 购物车，我进行了所需的更改。当然，这段代码不是最佳的，但它完成了工作，并为您提供了如何完成该任务的指导。

我所做的 2 个更改是:

1. 隐藏掉落的元素。
2. 当用户将其从购物车中删除时显示。

var data = {"total":0,"rows":[]};
var totalCost = 0;


$(function(){
  $('#cartcontent').datagrid({
    singleSelect:true
  });
  $('.item').draggable({
    revert:true,
    //proxy:'clone',
    onStartDrag:function(){
      $(this).draggable('options').cursor = 'not-allowed';
      $(this).draggable('proxy').css('z-index',10);
    },
    onStopDrag:function(){
      $(this).draggable('options').cursor='move';
    }
  });
  $('.cart').droppable({
    onDragEnter:function(e,source){
      $(source).draggable('options').cursor='auto';
    },
    onDragLeave:function(e,source){
      $(source).draggable('options').cursor='not-allowed';
    },
    onDrop:function(e,source){
      var name = $(source).find('p:eq(0)').html();
      var price = $(source).find('p:eq(1)').html();
      addProduct(name, parseFloat(price.split('$')[1]));
      $(source).hide();
    }
  });
});

function addProduct(name,price){
  function add(){
    for(var i=0; i<data.total; i++){
      var row = data.rows[i];
      if (row.name == name){
        row.quantity += 1;
        return;
      }
    }
    data.total += 1;
    data.rows.push({
      name:name,
      quantity:1,
      price:price,
      remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
    });
  }
  add();
  totalCost += price;
  $('#cartcontent').datagrid('loadData', data);
  $('div.cart .total').html('Total: $'+totalCost);
}

function removeProduct(el, event) {
  var tr = $(el).closest('tr');
  var name = tr.find('td[field=name]').text();
  var price = tr.find('td[field=price]').text();
  var quantity = tr.find('td[field=quantity]').text();
  for(var i = 0; i < data.total; i++){
    var row = data.rows[i];
    if (row.name == name) {
      data.rows.splice(i, 1);
      data.total--;
      break;
    }
  }
  totalCost -=  price * quantity;
  $('#cartcontent').datagrid('loadData', data);
  $('div.cart .total').html('Total: $'+totalCost);
  var li = $('p:contains(' + name + ')').parents('.item').first().show();
  console.log(name, li);
}

.products{
  list-style:none;
  margin-right:300px;
  padding:0px;
  height:100%;
}
.products li{
  display:inline;
  float:left;
  margin:10px;
}
.item{
  display:block;
  text-decoration:none;
}
.item img{
  border:1px solid #333;
}
.item p{
  margin:0;
  font-weight:bold;
  text-align:center;
  color:#c3c3c3;
}
.cart{
  position:fixed;
  right:0;
  top:0;
  width:300px;
  height:100%;
  background:#ccc;
  padding:0px 10px;
}
h1{
  text-align:center;
  color:#555;
}
h2{
  position:absolute;
  font-size:16px;
  left:10px;
  bottom:20px;
  color:#555;
}
.total{
  margin:0;
  text-align:right;
  padding-right:20px;
}

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link href="http://www.jeasyui.com/easyui/themes/icon.css" rel="stylesheet"/>
<link href="http://www.jeasyui.com/easyui/themes/default/easyui.css" rel="stylesheet"/>

<ul class="products">
  <li>
    <a href="#" class="item">
      <img src="images/shirt1.gif"/>
      <div>
        <p>Balloon</p>
        <p>Price:$25</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#" class="item">
      <img src="images/shirt2.gif"/>
      <div>
        <p>Feeling</p>
        <p>Price:$25</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#" class="item">
      <img src="images/shirt3.gif"/>
      <div>
        <p>Elephant</p>
        <p>Price:$25</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#" class="item">
      <img src="images/shirt4.gif"/>
      <div>
        <p>Stamps</p>
        <p>Price:$25</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#" class="item">
      <img src="images/shirt5.gif"/>
      <div>
        <p>Monogram</p>
        <p>Price:$25</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#" class="item">
      <img src="images/shirt6.gif"/>
      <div>
        <p>Rolling</p>
        <p>Price:$25</p>
      </div>
    </a>
  </li>
</ul>
<div class="cart">
  <h1>Shopping Cart</h1>
  <div style="background:#fff">
    <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;">
      <thead>
        <tr>
          <th field="name" width=140>Name</th>
          <th field="quantity" width=60 align="right">Quantity</th>
          <th field="price" width=60 align="right">Price</th>
          <th field="remove" width=60 align="right">Remove</th>
        </tr>
      </thead>
    </table>
  </div>
  <p class="total">Total: $0</p>
  <h2>Drop here to add to cart</h2>
</div>

http://jsfiddle.net/Vwu37/143/