拖放计算工具

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)
      }
}