JQuery UI: sortable ('toArray') возвращает пустой массив

Это меня озадачило. Следующий код возвращает ",,,":

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

Почему?! Это сводит меня с ума! Любые предложения?

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Если 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 sortable reference

Ответ 6

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

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

Ответ 7

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

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

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

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