Javascript 基于项ID为'；s错了_Javascript_Jquery_Drag And Drop_Draggable

Javascript 基于项ID为'；s错了

javascript jquery

Javascript 基于项ID为'；s错了,javascript,jquery,drag-and-drop,draggable,Javascript,Jquery,Drag And Drop,Draggable,我制作了一张带有一些测试用例的图片，只是为了告诉你什么时候计算出了所有的错误。在案例3中，如果我将第1项而不是第2项移出，那么它可能会起作用。经过几个小时的努力，我开始觉得有点盲目了计算有什么问题，可能是事件吗？有更好的方法吗 Jsbin：代码： JS-Bin 商品：2价格：542 商品：1价格：541 您的代码中有两个问题：问题1: 在drop:上，您没有检查该元素是否已存在于列表中。您需要为每个元素设置一个Id，并在拖放时查看items[]是否有一个Id相同的元素。在您的代码中，

我制作了一张带有一些测试用例的图片，只是为了告诉你什么时候计算出了所有的错误。在案例3中，如果我将第1项而不是第2项移出，那么它可能会起作用。经过几个小时的努力，我开始觉得有点盲目了

计算有什么问题，可能是事件吗？有更好的方法吗

Jsbin：

代码：


JS-Bin
商品：2
价格：542
商品：1
价格：541

您的代码中有两个问题：

问题1: 在

drop:

上，您没有检查该元素是否已存在于列表中。您需要为每个元素设置一个Id，并在拖放时查看

items[]

是否有一个Id相同的元素。在您的代码中，如果我多次从收件箱中拖放同一元素，则每次都会添加价格

问题2: 这就是你所描述的问题。澄清这里发生了什么。您的代码不会删除相反的值。它删除了数组中剩余的价格（在下拉框中）。因此，需要修改

out:

中的逻辑

因此，您需要重新思考

drop:

和

out:

中的逻辑，您的函数也是错误的。你可以这样做：

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

如果你想在放入或取出某样东西时添加或删除价格。

问题1：我知道这一点，因此我没有提出理由。我的解决方案是使用数据状态。如果data state=“inside”，它将不会运行calc函数。在out:event上，它将把数据设置回数据状态=“外部”。你介意告诉我你认为问题2的逻辑应该是什么样的吗？

<!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>

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