您可以在使用不同 jquery 函数创建的列表上使用 jquery 的可排序吗？

Question

它似乎应该工作，但它没有做任何事情。

我有一个函数可以在页面加载时使用 SQL 数据库中的名称创建一个列表。

var contentString = "<div id='priorityDiv'><ul id='sortable' class='connectedSortable'>";

for (var cntr = 0; cntr < listOfPeople.length; cntr++) 
{
     contentString = contentString + "<li class='ui-state-default' id='user_" + cntr + "'>" + listOfPeople[cntr].userFullName + "</li>"
}
contentString = contentString + "</ul></div>";

然后我将 contentString 附加到一个 div，当我在页面加载后检查 html 时，它工作得很好并且看起来不错。有一个 ul 可排序列表，其中包含正确的列表项。

然后，在脚本部分我只需要：

$(document).ready(function () {
    $("#sortable").sortable(
        {
        update: function () {
            var order = $('#sortable').sortable('toArray').toString();

            alert("Order:" + order);
        }

    }  
    ).disableSelection();
});

中间的东西是告诉我列表的已知顺序。因此列表显示在页面上，但没有一个项目是可移动或可排序的。即使我只是放了

$(document).ready(function () {
$('#sortable').sortable();
});

它仍然没有做任何事情。而且我的文件中确实有 jquery 1.9.2。

Answer 1

您需要在创建动态列表项之后绑定可排序的。否则当你绑定 sortable 时，它​​不知道要绑定到哪个元素，因为该元素不存在。

还有一项改进。如果您只希望能够对 <li> 元素进行排序，那么您正在将可排序对象绑定到父 <ul> 元素。

所以试试下面的。

$('#sortable').sortable({
    items: ' > li',
});

话虽如此，它现在应该可以正常工作，因为默认值为> *。你可以阅读更多over here。

Answer 2

$(document).ready() 正在页面加载中，您要做的是调用一个构建列表的函数（在 javascript 中），然后在构建后调用可排序函数。