Question

这让我很难过。以下代码返回“,,,,,,”：

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

为什么？这让我疯了！有什么建议吗？

Answer 1

您可以定义要获取的属性：

var result = $(this).sortable('toArray', {attribute: 'value'});

Answer 2

.sortable('toArray')将项Ids序列化为数组，而您的项目没有ID，这就是为什么你有空字符串。

Answer 3

我也遇到了这个问题，除了我确实在我的元素上有id，jQuery的可排序（'toArray'）在返回id时非常受欢迎，但是你可以使用这个在javascript中抓取它们：

function getSortOrder() {
    var children = document.getElementById('sortedElement').childNodes;
    var sort = "";
    for (x in children) {
        sort = sort + children[x].id + ",";
    }
    return sort;
}

这当然会以逗号分隔的字符串返回ID，但您可以返回该数组。我确信有更好的方法来解决这个问题，这只是我找到的解决方案。

Answer 4

我看到一些纯粹的javascript答案。他们工作但要注意，他们可能不会按照屏幕上可见的顺序返回项目。使用下面的代码，请参阅上面的jtsalva，将以正确的排序顺序返回项目。这让我感到难过，因为我想将新订单保存到数据库中，所以我可以重新加载有人离开的网格。

var result = $(this).sortable('toArray', {attribute: 'value'});

Answer 5

要使用其他属性，您可以执行此操作：

$('#element').sortable('toArray' {attribute: 'value'})

这将使它现在使用代码中的属性“value”。

Documentation on Sortable toArray method

Answer 6

如果serialize返回一个空字符串，请确保id属性包含下划线。它们必须采用以下形式：＆＃34; set_number＆＃34;例如，一个3元素列表，其id属性为＆＃34; foo_1＆＃34;，＆＃34; foo_5＆＃34;，＆＃34; foo_2＆＃34;将序列化为＆＃34; foo [] = 1＆amp; foo [] = 5＆amp; foo [] = 2＆＃34;。您可以使用下划线，等号或连字符来分隔集合和数字。例如＆＃34; foo = 1＆＃34;，＆＃34; foo-1＆＃34;和＆＃34; foo_1＆＃34;所有序列化为＆＃34; foo [] = 1＆＃34;。

jq sortable reference

Answer 7

$（＆＃39; .sortable＆＃39;）。sortable（＆＃39; toArray＆＃39;）; 只解析第一个元素class sortable 。您可以使用每个：

来解析所有元素

$('.sortable').each(function(){
    result.push($(this).sortable('toArray'));
})

jQuery UI：sortable（'toArray'）返回一个空数组

7 个答案: