Как сравнить draggable-элемент jQuery?

Question

мой HTML код

<div id="products"> 
    <div class="ui-widget-content"> 
     <ul> 
      <li data-id="1" class = "credit"> 10000$ </li> 
      <li data-id="2"class = "credit"> 5000$ </li> 
      <li data-id="3" class = "credit"> 10000$ </li> 
      <li data-id="4" class = "credit"> 5000$ </li> 
     </ul> 
    </div> 
</div> 
<table width:100%> 
    <tr><td> 
<h3 class="ui-widget-header">Yahoo</h3> 
<table border=1 width=100%> 
    <tr> 
     <td><div id="shoppingCart1" class="shoppingCart"> 
    <h7 class="ui-widget-header">Number 1</h7> 
    <div class="ui-widget-content"> 
     <ol> 
      <li class="placeholder">Add your items here</li> 
     </ol> 
    </div> 
</div> 
    </td> 

    </tr> 
</table> 
     </td><td> 
<h3 class="ui-widget-header">Yahoo</h3> 
<table border=1 width=100%> 
    <tr> 
     <td><div id="shoppingCart1" class="shoppingCart"> 
    <h7 class="ui-widget-header">Number 2</h7> 
    <div class="ui-widget-content"> 
     <ol> 
      <li class="placeholder">Add your items here</li> 
     </ol> 
    </div> 
</div> 
    </td> 
    </tr> 
</table> 
     </td></tr></table> 

и мой JS код

$("#products li").draggable({ 
    appendTo: "body", 
    helper: "clone" 
}); 
$("#shoppingCart1 ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept:".credit", 
    drop: function(event, ui) { 
     var self = $(this); 
     self.find(".placeholder").remove(); 
     var productid = ui.draggable.attr("data-id"); 
     if (self.find("[data-id=" + productid + "]").length) return; 
     $("<li></li>", { 
      "text": ui.draggable.text(), 
      "data-id": productid 
     }).appendTo(this); 
     // To remove item from other shopping chart do this 
     var cartid = self.closest('.shoppingCart').attr('id'); 
     $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove(); 
    } 
}).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
}); 
$("#shoppingCart2 ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept:".debit", 
    drop: function(event, ui) { 
     var self = $(this); 
     self.find(".placeholder").remove(); 
     var productid = ui.draggable.attr("data-id"); 
     if (self.find("[data-id=" + productid + "]").length) return; 
     $("<li></li>", { 
      "text": ui.draggable.text(), 
      "data-id": productid 
     }).appendTo(this); 
     // To remove item from other shopping chart do this 
     var cartid = self.closest('.shoppingCart').attr('id'); 
     $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove(); 
    } 
}).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
}); 

теперь вы можете увидеть демо здесь - http://jsfiddle.net/Sanjayrathod/5DMru/

Что я хочу, если я перетащить элемент в поле «Число 1», а затем я перетащил элемент в поле «Номер 2», теперь, после удаления элементов в соответствующем поле «Ящик», я хочу получить общее/суммирующее значение соответствующих полей и сравнить значение суммирования соответствующих полей , т.е. Сравним суммирование окнеНомер 1 с суммированием поле Номер 2

Answer 1

Вам просто нужно пройти каждый li в обоих полях и суммировать их значения:

var amount1 = 0; 
$("#shoppingCart1 ol").find('li').each(function() { 
    amount1 += parseInt($(this).text()); 
}); 
var amount2 = 0; 
$("#shoppingCart2 ol").find('li').each(function() { 
    amount2 += parseInt($(this).text()); 
}); 
if(amount1 > amount2) { // the value in the first box is greater than in the second 
    //TODO notify user 
} else if (amount1 < amount2) { // the value in the first box is less than in the second 
    //TODO notify user 
} else { // // the value in the first box is equal to the second 
    //TODO notify user 
} 

сделать это в каждом из небьющихся ручек после добавления значения. Я обновил вашу скрипку: see here.

BTW, у вас есть опечатка в вашем коде: в обеих коробках есть идентификатор shoppingCart1 вместо второй коробки с идентификатором shoppingCart2.