对自定义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-totals”和id =“sortable2-totals”