0

私はこのコードをいじってみましたが、すべてうまくいくように見えました。黄色のボックスの 1 つを赤色のコンテナーにドラッグすると、変数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

4

1 に答える 1

2

あなたのコードの問題のある行は、 NaNの問題がもう存在しない
items.splice($.inArray(u.draggable.data('item', items),1));
ように変更したことです..価格の計算を確認する必要があります..このリンクを参照してください
items.splice($.inArray(u.draggable.data('item'), items));

于 2013-02-07T11:48:06.813 に答える