jQuery Sortable-сохранение порядка при перетаскивании нового элемента в список

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

моя проблема заключается в управлении положением новых рабочих заданий, перетаскиваемых на Route список. Есть ли простой способ справиться с обновление позиций всех элементов списка (на стороне базы данных вещей через вызовы ajax) по мере добавления новых элементов?

немного больше информации для ясности...

когда Route список пуст (еще не добавлены рабочие заказы) это просто-пользователь перетаскивает новый рабочий заказ в пустой список, ajax-вызов, сделанный для сохранения деталей (на базовых записях на сервере) обоих

7
jquery jquery-ui-sortable

2 ответов

есть ли простой способ сделать это или это просто вопрос кодирования вверх приличное количество функций jQuery и backend для управления этим? У меня есть я охотился по сети за решениями, но ничего не нашел. это окончательно.

в значительной степени да, но если вы уже знаете, как обрабатывать вызовы Ajax для сортируемых таблиц, смешивание двух списков не является проблемой. Я использую модифицированную версию кода на этой странице. И я использую receive событие & the stop событие чтобы показать, как вы можете подключить простую функцию в базовое сортируемое кодирование:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      receive: function( event, ui ) { alert('Receive!'); },
      stop: function( event, ui ) { alert('Stop!'); }
    }).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>


</body>
</html>

поэтому, когда элемент сортируется и сортировка останавливается, " стоп!- появится окно оповещения. И когда новый элемент перетаскивается в один список из другого получают!"в дополнение к остановке появляется окно оповещения. Возможно, вы сможете просто использовать stop событие для запуска вызова Ajax, но receive даже может быть полезно делать что-то еще если/когда новый элемент добавляется в список.

4

вы можете сохранять порядок каждого столбца при каждом обновлении с помощью вызова ajax. Рабочий Пример JSFiddle

объяснение ниже: Для этого вам нужно дать каждому из сортируемых элементов уникальный идентификатор. Например:

    <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id='item1'>Item 1</li>
    <li class="ui-state-default" id='item2'>Item 2</li>
    <li class="ui-state-default" id='item3'>Item 3</li>
    <li class="ui-state-default" id='item4'>Item 4</li>
    <li class="ui-state-default" id='item5'>Item 5</li>
   </ul>
    <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight" id='item6'>Item 6</li>
        <li class="ui-state-highlight" id='item7'>Item 7</li>
        <li class="ui-state-highlight" id='item8'>Item 8</li>
        <li class="ui-state-highlight" id='item9'>Item 9</li>
        <li class="ui-state-highlight" id='item10'>Item 10</li>
    </ul>

затем вы можете захватить идентификатор каждого сортируемого li и вернуть сообщение в запросе ajax. 

 $(function () {
     $("#sortable1, #sortable2").sortable({
         connectWith: ".connectedSortable",
         update: function () {
             var order1 = $('#sortable1').sortable('toArray').toString();
             var order2 = $('#sortable2').sortable('toArray').toString();

             alert("Order 1:" + order1 + "\n Order 2:" + order2); //Just showing update
             $.ajax({
                 type: "POST",
                 url: "/echo/json/",
                 data: "order1=" + order1 + "&order2=" + order2,
                 dataType: "json",
                 success: function (data) {


                 }
             });

         }
     }).disableSelection();
 });

затем вы можете выполнить процесс сохранения заказа на странице, на которой вы выполняете запрос.

8