拖放计算工具

Question

我正在构建一个"产品配置器"。我想做的是，当产品从列表中拖放到"可定制"区域时，总价格会发生变化。到目前为止，我已经做到了这一点：

.HTML

<div id="sidePanel">
     <ul id="list-two" class="linked">
     <li id="PTB1" data-price="45"><img src="PTB%201.jpg"></li>
     <li id="PTB2" data-price="55"><img src="PTB%202.jpg"></li>
     <li id="PTB3" data-price="67"><img src="PTB%203.jpg"></li>
     <li id="PTB1" data-price="50"><img src="PTB%204.jpg"></li>
 </ul>

 <ul id="list-three" class="linked">
     <li><img src="Screen%201.jpg"</li>
     <li><img src="Screen%202.png"></li>
     <li><img src="Refills.jpg"></li>
 </ul>
</div>
<p class="total">TOTAL $</p>

JavaScript

var totalCost = 0;
var basket = []

$(function() {
$("#list-one").sortable({
    revert: true,
    beforeStop: function(event, ui) {
        $(this).data("lastItem", ui.item);
    },
    receive: function(e, source) {
        basket.push($(".linked li").data('price'));
            for (var i = 0; i < basket.length; i++) {
            totalCost += basket[i] << 0;
        $("p.total").html("Total: $"+totalCost)
            }
    }
});
$(".linked li").draggable({
    connectToSortable: "#list-one",
    helper: "clone",
    revert: "invalid"
});
$("ul, li, img").disableSelection();
});

我遇到的问题是，每当我将新产品拖放到可自定义区域时，它仅/始终获取列表中第一个产品（45）的数据价格，并且似乎计算不正确。但是，我想针对拖放产品的数据价格。

关于如何解决这个问题（或改进它）的任何想法？

Answer 1

我稍微修改了你的代码，所以你不必使用'<<'，我不完全相信你应该在这种情况下使用它。

receive: function(e, source) {
    var item = parseInt(source.item[0].dataset.price);
    basket.push(item);
    totalCost = 0;
    for (var i = 0; i < basket.length; i++) {
        totalCost += basket[i];
        $("p.total").html("Total: $"+totalCost)
      }
}