javascript - jquery ui sortable - 按属性值排序

Question

如果我正在运行 jquery ui 并在 ul 元素中使用 sortable:

$("#example").sortable({
    update: function () {
        //do something
    }
});

<ul id="example">
<li data-ex="1.1"></li>
<li data-ex="0.1"></li>
<li data-ex="1.4"></li>
</ul>

有没有一种方法可以触发按数据属性即时对我的元素进行排序的事件？本质上，我想要一个按数据属性对 li 元素进行排序的按钮，它也会触发 sortable() 中的更新。

Answer 1

你可以试试这个:

$(document).ready(function () {
    $("#example").sortable({//Sortable initialisation
        update: function () {
            updatehandler();//Custom function which handles sortable update.
        }
    });
    $('a').click(function () {// Click handler to sort
        var list = $('#example');
        var listItems = list.find('li').sort(function (a, b) {
            return $(a).attr('data-ex') - $(b).attr('data-ex');
        });
        list.find('li').remove();
        list.append(listItems);
        updatehandler();//Call updatehandler after sorting
        return false;
    });    
});

function updatehandler() {
    //Your update handler code.
    alert('updated');
}

HTML:

<a href="">Sort</a>
<ul id="example">
    <li data-ex="1.1">1.1</li>
    <li data-ex="0.1">0.1</li>
    <li data-ex="1.4">1.4</li>
</ul>

演示:http://jsfiddle.net/lotusgodkk/GCu2D/151/