Пользовательский интерфейс 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

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

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

Answer 2

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

Answer 3

У меня тоже была эта проблема, за исключением того, что у меня были идентификаторы на моих элементах, сортировка 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 4

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

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

Answer 5

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

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

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

Документация по способу сортировки toArray

Answer 6

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

$('.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 сортируемая ссылка