對自定義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可排序）並且具有輸出每個目標<ul>的字母總數（ data-letters值的總和）的函數。 。

可以這樣做嗎？ 如果是這樣，我們將非常感謝您的一些指示。

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”