Пользовательский интерфейс jQuery: sortable('toArray') возвращает пустой массив

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

.sortable('toArray') сериализует предметы Ids в массив, и ваши элементы не имеют идентификаторов, поэтому у вас есть пустые строки.

Answer 2

Вы можете определить, какой атрибут извлекать следующим образом:

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

Answer 3

Я вижу несколько чисто javascript ответов. Они работают, но будьте осторожны, они могут не вернуть предметы в порядке, который виден на экране. Используя приведенный ниже код, см. Выше jtsalva, вы вернете элементы в правильном порядке. Это поставило меня в тупик на некоторое время, потому что я хотел сохранить новый заказ в базе данных, чтобы я мог перезагрузить сетку, где кто-то остановился.

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

Answer 4

У меня также была эта проблема, за исключением того, что у меня были идентификаторы на моих элементах, сортировка jQuery ('toArray') была очень неудачной при возврате идентификаторов, однако вы можете получить их в javascript, используя это:

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

Это, конечно, возвращает идентификаторы в строке через запятую, но вы можете вернуть массив. Я уверен, что есть лучший способ решить эту проблему, это просто решение, которое я нашел.

Answer 5

Чтобы использовать другой атрибут, вы можете сделать это:

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

Это сделает так, что теперь он использует атрибут 'value' из вашего кода.

Документация по Сортируемому методу toArray

Answer 6

$('сортировка.) сортируется (' ToArray'). будет анализировать только первый элемент класса сортируемый. Вы можете проанализировать все элементы, используя каждый:

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

Answer 7

Если serialize возвращает пустую строку, убедитесь, что атрибуты id содержат подчеркивание. Они должны иметь вид: "set_number". Например, список из 3 элементов с атрибутами id "foo_1", "foo_5", "foo_2" будет сериализован в "foo[]=1&foo[]=5&foo[]=2". Вы можете использовать подчеркивание, знак равенства или дефис для разделения набора и числа. Например, "foo=1", "foo-1" и "foo_1" все сериализуются в "foo [] = 1".

jq сортируемая ссылка