カスタムHTMLデータに対して操作を実行しますか？

Question

次のように私は<ul>内アイテムのセットを持っている：

<li class="word" id="apple" data-letters="5" draggable="true">apple</li> 
<li class="word" id="ball" data-letters="4" draggable="true">ball</li> 

は私が合計を他の<ul> Sにこれらの項目をドラッグする（現在はソート可能jQueryUIを使ってこれを行う）して出力する機能を持つことができるようにしたいです各ターゲットの文字数（合計はdata-lettersの値）<ul> ...

これはできますか？もしそうなら、いくつかの指摘は非常に高く評価されるでしょう。

Answer 1

$(function() { 

      var updateTotal = function(event, ui) 
      { 
       var total = 0, 
        $list = $(ui.sender); 
       $list.find(".word").each(function() { 
        total += Number($(this).attr("data-letters")); 
       }); 
       $("#" + $list.attr("id") + "-totals").html(total); 
      }; 

    $("#sortable1, #sortable2").sortable({ 
        receive: updateTotal, 
        remove: updateTotal, 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 

これはあなたの合計を表示するHTMLタグにid = "sortable1-合計" とid = "sortable2-合計を" 持っていることを前提としてい