выполнять операции с пользовательскими данными 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-totals" и id = "sortable2-totals"