Javascript jquery ui可排序-按属性值排序

如果运行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>

$（“#示例”）.sortable({
更新：函数（）{
//做点什么
}
});

---

是否有一种方法可以触发一个事件，动态地按数据属性对元素进行排序？本质上，我希望有一个按钮可以按data属性对li元素进行排序，同时也会触发sortable（）中的更新。

我对sortable不太熟悉，但这个小提琴展示了如何获取data ex属性的值，并定义一个用于在插件中排序的变量：

我将

class=“sort”

添加到您的html中，然后使用以下方法获得值：

var dataEx;
$('.sort').click(function(){
var dataEx = $(this).attr("data-ex");
alert(dataEx);
});

您可以尝试以下方法：

$(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:

1.1
0.1
1.4

---

演示：

抱歉，这毫无意义，它无助于排序，而且jquery ui的排序表中也没有“sortby”方法

<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>