jQuery可拖動和droppable與數據（）返回NaN

Question

我一直在玩這段代碼，一切似乎工作得很好。當我將其中一個黃色框拖到紅色容器上方時，變量price將與data-price值一起遞增，然後在黃色框離開紅色容器時將其減去。

當我將它們拖回紅色容器一次並導致NaN時，問題就出現了。 $(".draggable[data-item='" + value + "']").data('price');似乎未定義。

任何幫助在正確的方向表示讚賞。

$(function() { 
    var price = 0, math = '', items = []; 
    function calcPrice(math) { 
     console.log(items); 
     $.each(items, function(key, value) { 
     if(math == 'add') 
      price += $(".draggable[data-item='" + value + "']").data('price'); 
     if(math == 'remove') 
      price -= $(".draggable[data-item='" + value + "']").data('price'); 
     }); 
    $("#droppable").text(price); 
    } 
    $(".draggable").draggable({ containment: "#container", scroll: false }); 
    $("#droppable").droppable({ 
    drop: function(e, u) { 
     items.push(u.draggable.data('item')); 
     calcPrice('add'); 
    }, 
    out: function(e, u) { 
     calcPrice('remove'); 
     items.splice($.inArray(u.draggable.data('item', items),1)); 
    } 
    }); 
}); 

 

<div id="container"> 
    <div id="droppable"></div> 
    <div class="draggable" data-item="1" data-price="541">541</div> 
    <div class="draggable" data-item="2" data-price="542">542</div> 
    </div> 

Jsbin：http://jsbin.com/exilos/1/edit

Answer 1

在我們的代碼有問題的行是
items.splice($.inArray(u.draggable.data('item', items),1));
我已經改變了，要
items.splice($.inArray(u.draggable.data('item'), items));
NaN的問題是不存在了..u必須檢查價格的計算。
see this link