Использование сортировки jquery ui для объединения двух упорядоченных списков элементов в третий - PullRequest
Новая
       2

Использование сортировки jquery ui для объединения двух упорядоченных списков элементов в третий

0 голосов
/ 23 мая 2011

Имея два списка [A,B,C,D] и [1,2,3,4], я хочу предоставить пользовательский интерфейс для объединения их в новый список. В новом списке следует сохранить первоначальный порядок каждого списка. Например, любой из [A,1,B,2,C,3,D,4] или [A,B,C,D,1,2,3,4] или [A,B,1,C,2,3,4,D] в порядке. Но [B,A,1,2,3,4,C,D] не принимается, поскольку B предшествует A.

jQuery UI sortable, кажется, хорошая отправная точка. Но поддержание исходного порядка не поддерживается (Конечно, значение sorttable противоречит моему требованию. Но пользовательский интерфейс, поддерживаемый sorttable, очень похож на мою конечную цель.)

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

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 23 мая 2011

Чтобы отменить сортировку, просто верните false в обратном вызове sortbeforestop: 

$( "#sortable" ).bind( "sortbeforestop", function(event, ui) {
  return false;
});
0 голосов
/ 23 мая 2011

Концептуально - не вдаваясь в детали реализации и не предполагая, что мы имеем дело с двумя массивами объектов - я бы сначала просмотрел каждый список и добавил добавленное свойство с именем «OrderPosition», начинающееся с 1, к каждому объекту, что приведет к следующему: 

                item.OrderPosition   
list1item1      1
list1item2      2
list1item3      3

list2item1      4
list2item2      5

Затем объедините списки с помощью простого jquery array.merge (), который добавит array2 к array1 или, если вы хотите, чтобы они объединялись поочередно, выполнялся итерацией и сливался вручную. Оба метода должны сохранять заказы отдельных списков. Это должно дать вам следующий список при использовании второго метода: 

                OrderPosition
list1item1      1
list2item1      4
list1item2      2
list2item2      5
list1item3      3

Это позволит вам узнать, насколько низко может быть отсортирован элемент в объединенных списках (нельзя упорядочить элемент ниже, чем элемент, у которого есть OrderPosition of draggedItem.OrderPosition + 1)

Элементами в сортируемом элементе управления jquery являются отдельные объекты типа draggable. Перетаскиваемые объекты могут быть ограничены в своем перемещении с помощью параметра сдерживания. Я бы использовал это, чтобы не допустить перетаскивания дальше, чем элемент, перед элементом с OrderPosition of draggedItem.OrderPosition + 1. Конечно, вам придется пересчитывать и сбрасывать настройки для содержания каждый раз, когда изменяется порядок списка. Преимущество этого подхода заключается в меньшем разочаровании пользователя, потому что его «работа» не сбрасывается каждый раз, когда он заказывает что-то незаконным образом, сортируемый просто не позволит неправильно сортировать что-либо.

Надеюсь, что это имеет какой-то смысл или даже помогает.

0 голосов
/ 23 мая 2011

ты прав. Сортируемый jquery сделает свое дело.

начать с использования помощника 

$( ".selector" ).sortable({ helper: 'clone' });

это не будет перетаскивать сам элемент, а клонированную копию.

Далее вы можете использовать событие «beforeStop» для проверки предыдущего и следующего элемента. 

$( ".selector" ).sortable({ 
     helper: 'clone',
     beforeStop: function(event, ui) { ... }
 });

помните, что функции appendTo и prependTo и insertAfter и insertBefore перемещают элемент dom, а не клонируют его. Это означает, что этот код действителен для игры с элементами li.

HTML: 

<ul>
<li class='i-1'>first</li>
<li class='i-2'>second</li>
<li class='i-3'>third</li>
<li class='i-4'>fourth</li>
</ul>

JQuery: 

$('li').eq(3).insertBefore('li.i-1');

результат: 

<ul>
<li class='i-4'>fourth</li>
<li class='i-1'>first</li>
<li class='i-2'>second</li>
<li class='i-3'>third</li>
</ul>
...