jQuery：拖拽新增元素后重新计算总和的问题咨询

你遇到的问题很典型：页面加载时你就计算了右侧列的初始总和，但之后拖拽新元素进去后，这个sum变量并没有被重新计算，所以点击按钮时还是显示原来的旧数值。

方法一：点击按钮时重新计算总和 #

把计算总和的逻辑移到点击事件内部，这样每次用户点击"获取总和"按钮时，都会重新遍历当前右侧列的所有元素，计算最新的总和：

$( function() {
  $( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
  
  $('#getTotal').click(function() {
    var sum = 0.0;
    // 每次点击都重新遍历当前#sortable2里的badge元素
    $('#sortable2 .badge-pill').each(function() {
      sum += parseFloat($(this).text());
    });
    $('#grandTotal').html(sum);
  });
});

方法二：拖拽完成后自动实时更新总和 #

如果你希望不需要点击按钮，拖拽元素后总和自动更新，可以利用jQuery UI Sortable的update事件，这个事件会在拖拽排序操作完成后触发：

$( function() {
  $( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable",
    // 拖拽完成后触发更新逻辑
    update: function(event, ui) {
      var sum = 0.0;
      $('#sortable2 .badge-pill').each(function() {
        sum += parseFloat($(this).text());
      });
      $('#grandTotal').html(sum);
    }
  }).disableSelection();
  
  // 页面加载时先计算初始总和
  var initialSum = 0.0;
  $('#sortable2 .badge-pill').each(function() {
    initialSum += parseFloat($(this).text());
  });
  $('#grandTotal').html(initialSum);
});

这样不管是把元素从左边拖到右边，还是在右边列内部调整顺序，总和都会自动更新，用户体验会更流畅。

内容的提问来源于stack exchange，提问作者MinPower