对自定义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>秒（目前在做这个使用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-总计”