Javascript 购物车：放置时求和事件（JQuery）

我目前正在创建一个购物车与下拉和拖动元素。每个元素都有一个值（价格），当将该值放入目标时，该值将显示在输入字段中。 这是我的小提琴：

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新手，还不能完全适应它。任何形式的帮助都会很好

在你的二手购物车上，我做了必要的改动。当然，这段代码不是最优的，但它完成了任务，并让您知道如何实现这一点

我做的两个改变是：

隐藏删除的项目

当用户从购物车中删除它时显示它

var数据={“总计”：0，“行”：[]；
var总成本=0；
$（函数（）{
$（'#cartcontent'）.datagrid({
singleSelect:true
});
$（'.item'）。可拖动({
回复：对，
//代理：'clone'，
onStartDrag:function（）{
$（this）.draggable（'options'）。游标='不允许'；
$（this）.draggable（'proxy'）.css（'z-index'，10）；
},
onStopDrag:function（）{
$（this）.draggable（'options'）.cursor='move'；
}
});
$（'.cart'）。可拖放({
onDragEnter:函数（e，源）{
$（源）.draggable（'options'）.cursor='auto'；
},
onDragLeave：函数（e，源）{
$（source）.draggable（'options'）。cursor='not-allowed'；
},
onDrop：函数（e，源）{
var name=$（source.find（'p:eq（0）'）.html（）；
var price=$（source.find（'p:eq（1）'）.html（）；
addProduct（名称，parseFloat（price.split（“$”）[1]）；
$（source.hide（）；
}
});
});
功能添加产品（名称、价格）{
函数add（）{
对于（var i=0；i你的第二小提琴购物车，我做了必要的修改。当然，这段代码不是最优的，但它完成了这项工作，并为你指明了如何完成这项工作的方向

我做的两个改变是：

隐藏删除的项目
当用户从购物车中删除它时显示它

var数据={“总计”：0，“行”：[]；
var总成本=0；
$（函数（）{
$（'#cartcontent'）.datagrid({
singleSelect:true
});
$（'.item'）。可拖动({
回复：对，
//代理：'clone'，
onStartDrag:function（）{
$（this）.draggable（'options'）。游标='不允许'；
$（this）.draggable（'proxy'）.css（'z-index'，10）；
},
onStopDrag:function（）{
$（this）.draggable（'options'）.cursor='move'；
}
});
$（'.cart'）。可拖放({
onDragEnter:函数（e，源）{
$（源）.draggable（'options'）.cursor='auto'；
},
onDragLeave：函数（e，源）{
$（source）.draggable（'options'）。cursor='not-allowed'；
},
onDrop：函数（e，源）{
var name=$（source.find（'p:eq（0）'）.html（）；
var price=$（source.find（'p:eq（1）'）.html（）；
addProduct（名称，parseFloat（price.split（“$”）[1]）；
$（source.hide（）；
}
});
});
功能添加产品（名称、价格）{
函数add（）{
对于（var i=0；i
$("#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!");
 }
});