Получить список элементов списка в сортировочном списке jQuery после запуска

Ответ 1

Я написал ответ на этот вопрос 5 лет назад, но этот ответ засасывается (и этот вопрос имеет почти 38 000 просмотров), поэтому здесь улучшенный ответ.

По существу три части этого вопроса, которые вы должны решить. Мы рассмотрим все три.

Ответ на изменения в порядке сортировки (шаг 1)

Первым вопросом, который нам нужно решить, является реакция на изменения порядка отсортированных элементов. Если мы проверим JQuery UI Sortable Widget документация, мы увидим, что у него есть change, которое срабатывает всякий раз, когда порядок сортировки изменяется и идеально подходит для наших нужд.

Боковое примечание: в моем первоначальном ответе вместо change было использовано stop. change лучше (по крайней мере, в этом случае), потому что он будет сообщать обо всех изменениях в сортировке, независимо от того, было ли изменение интерактивным (пользовательским) или программным, и только если заказ действительно изменился. С другой стороны, событие sort запускается только тогда, когда пользователь останавливает сортировку (отпускает мышь или поднимает палец).

Используя событие sort, мы можем теперь реагировать на изменения в сортировке. Следующее будет инициализировать виджет Sortable для нас и позволит нам установить функцию, вызываемую при срабатывании sort:

var $sortableList = $("#your-list");

var sortEventHandler = function(event, ui){
    console.log("New sort order!");
};

$sortableList.sortable({
    stop: sortEventHandler
});

// You can also set the event handler on an already existing Sortable widget this way:

$sortableList.on("sortchange", sortEventHandler);

Сделав это, мы готовы перейти к шагу 2:

Получение отсортированных элементов (шаг 2)

Эта часть довольно проста. Нам просто нужно получить массив элементов в нашем отсортированном списке. Для этого мы можем просто запросить дочерние элементы элемента ul (list), используя функцию jQuery children():

var listElements = $sortableList.children();

console.log(listElements); // [ <li>, <li>, ... ]

Отлично, но нам нужны значения элементов:

var listValues = [];

listElement.forEach(function(element){
    listValues.push(element.innerHTML);
});

console.log(listValues); // [ "Item 1", "Item 2", ... ]

Использование .sortable("toArray") или .serialize() также параметры.

Ницца! На конечный бит.

Сериализация и отправка нового упорядоченного заказа (шаг 3)

Сериализация - это "процесс преобразования структур данных или состояния объекта в формат, который может быть сохранен (например, в буфере файла или памяти или передан по линии сетевого соединения)" (спасибо Wikipedia!)

Как вы это делаете, это зависит от ваших конкретных потребностей, поэтому мы просто обсудим некоторые способы, как это можно сделать, используя jQuery.

AJAX:

Если мы используем AJAX, мы можем просто отменить запрос на сервер с новым порядком. jQuery автоматически обработает сериализацию listValues для нас:

$.post("your-server.com/save_order", { "items": listValues } );

Или, если вы предпочитаете JSON:

$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );

Форма

Создайте форму:

<form action="your-server.com/save_order" method="POST">
    <input name="items" value="" />
</form>

Обновите ввод item:

var serializedValue = $.param(listValues);

$("#ourForm > input").val(JSON.encode(listValues));

Отправить:

$("#ourForm").submit()

Старый ответ:

HTML:

<form action="save_order.php" method="POST" style="display: none;">
<input name="new_order" value="" type="hidden" />
</form>

JavaScript:

$(".selector").sortable({
    stop: function(event, ui) {
        var data = "";

        $("#sortable li").each(function(i, el){
            var p = $(el).text().toLowerCase().replace(" ", "_");
            data += p+"="+$(el).index()+",";
        });

        $("form > [name='new_order']").val(data.slice(0, -1));
        $("form").submit();
    }
});

И в файле save_order.php вы можете проанализировать переменную POST "new_order" и получить заказы из пункта 1, пункта 2, пункта 3 и т.д.

Ответ 2

Попробуйте использовать serialize для форматирования строки для отправки обновления базы данных script.

http://jsfiddle.net/zFQ2j/

http://docs.jquery.com/UI/Sortable#method-serialize

Ответ 3

Это поможет:

alert($( "#sortable" ).sortable( "toArray" ).toSource());

Ответ 4

Май 2018

Этот пример Javascript даст вам весь список DIVS в #sortableContainer каждый раз, когда производится сортировка

<div id="sortableContainer">
   <div id="Element1" class="sortIt">Item 1</div>
   <div id="Element2" class="sortIt">Item 2</div>
   <div id="Element3" class="sortIt">Item 3</div>
   <div id="Element4" class="sortIt">Item 4</div>
</div>

JS:

$( function() {
  $( "#sortableContainer" ).sortable({

    stop: function(event, ui) {

      var itemOrder = $('#sortableContainer').sortable("toArray");

      for (var i = 0; i < itemOrder.length; i++) {
        console.log("Position: " + i + " ID: " + itemOrder[i]);
      }

    }
  });

});

ДЕМО и Кредиты: http://www.tutorialspark.com/jqueryUI/jQuery_UI_Sortable_Getting_Order_of_Sortable.php

Ответ 5

Легко решить:

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        var order_id = jQuery_2(ui.item).index();
        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

Ответ 6

И вы можете:

jQuery_2( function() {
 var url = '<?php echo base_url(); ?>planner/Planner/edit_status/';
 jQuery_2('ul[id^="sort"]').sortable({
     connectWith: ".sortable",
     /*receive: function (e, ui) {
         var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
         var task_id = jQuery_2(ui.item).data("task-id");
         jQuery_2.ajax({
             url: url,
             method: 'POST',
             data: { status_id: status_id, task_id: task_id, },
             success: function(response){ }
         });
    },*/
    update: function(e, ui) {
        var status_id = jQuery_2(ui.item).parent(".sortable").data("status-id");
        var task_id = jQuery_2(ui.item).data("task-id");
        //var order_id = jQuery_2(ui.item).index();
        var order_id = [];

        $("#sort"+status_id+" li").each(function(index) {
            order_id.push($(this).attr('data-task-id'));
        });

        jQuery_2.ajax({
            url: url,
            method: 'POST',
            data: { status_id: status_id, task_id: task_id, order_id: order_id, },
            success: function(response){ }
        });
    }

 }).disableSelection();
 } );

Ответ 7

Вот как я сделал это Использовать обработчик событий, чтобы захватить событие сортировки, а затем получить отсортированные значения через функцию ToArray, перебрать значения и присвоить массиву. Этот массив затем вы можете перейти к посту Ajax

    var $sortableList = $("#sortable");

var sortEventHandler = function(event, ui){
    var sortedIDs = $( "#sortable" ).sortable( "toArray" );
                var listValues = [];
                for (var i = 0; i < sortedIDs.length; i++) {

                listValues.push(sortedIDs[i]);
      }
            console.log(listValues);
};

$sortableList.sortable({
    stop: sortEventHandler
});

$sortableList.on("sortchange", sortEventHandler);