0

計算がすべてうまくいかない場合を示すために、いくつかのテスト ケースの図を作成しました。ケース 3 では、アイテム 2 の代わりにアイテム 1 を移動すればうまくいきます。これを修正しようとして数時間後、私は少し盲目になり始めています。

計算の何が問題なのですか。それはイベントでしょうか? これを行うより良い方法はありますか？

ここに画像の説明を入力

Jsbin: http://jsbin.com/ejasun/1/edit

コード：

var price = 0, math = '', items = [], state = 'outside';
$(function() {
  function calcPrice(math) {
    var value = null;
    if(items.length === 0) {
      price = 0;
    }
    console.log("Item array: " + items);
      $.each( items, function( key, value ) {
        if(math == 'add')
          price += $(".draggable[data-item='" + value + "']").data('price');
        console.log("Total price: " + price);
        if(math == 'remove'){
          console.log("Total price " + price + " -= " + $(".draggable[data-item='" + value + "']").data('price'));
          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'));
      price = 0;
      calcPrice('add');
      u.draggable.data('state', 'inside');
    },
    out: function(e, u) {
      if(u.draggable.data('state') == 'inside') {
        u.draggable.data('state', 'outside');
        items.splice($.inArray(u.draggable.data('item'), items,1)); 
        calcPrice('remove');
      }
    }
  });
});

 

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="droppable"></div>
    <div class="draggable" data-item="2" data-price="542" data-state="outside">item: 2<br>price: 542</div>
    <div class="draggable" data-item="1" data-price="541" data-state="outside">item: 1<br>price: 541</div>
  </div>
</body>
</html>
4

2 に答える 2

1

Your $.inArray function is wrong and splice as well. You could just do this:

var price = 0, math = '', items = [], state = 'outside';
 $(function() {
  function calcPrice(math) {
   var value = null;

   price = 0;

console.log("Item array: " + items);
  $.each( items, function( key, value ) {
    price+= $(".draggable[data-item='" + value + "']").data('price');

  });

$("#droppable").html(price);
}

 $(".draggable").draggable({ containment: "#container", scroll: false });
 $("#droppable").droppable({
   drop: function(e, u) {  
     items.push(u.draggable.data('item'));
     price = 0;
     calcPrice('add');
     u.draggable.data('state', 'inside');
  },
   out: function(e, u) {
     if(u.draggable.data('state') == 'inside') {
       u.draggable.data('state', 'outside');
       var myIndex = $.inArray(u.draggable.data('item'), items);
       items.splice(myIndex, 1);
       price = $("#droppable").text();
       calcPrice('remove');
     }
   }
 });
 });

if you want to just add and remove price when you drop something in or drag something out.

于 2013-02-11T14:51:11.257 に答える
0

コードには 2 つの問題があります。

問題1 :drop:要素がリストに既に存在するかどうかを確認していません。各要素に ID を設定し、ドロップ時items[]に同じ ID の要素があるかどうかを確認する必要があります。あなたのコードでは、ドロップボックスから同じ要素を複数回ドロップすると、毎回価格が追加されます。

問題2： あなたが説明する問題です。ここで何が起こっているのかを明確にする。あなたのコードは反対の値を削除しません。配列 (ドロップ ボックス) に残っている価格と等しい価格を削除します。したがって、ロジックをout:変更する必要があります。

drop:したがって、 と の両方でロジックを再考する必要があります。out:

于 2013-02-11T13:02:46.363 に答える