Jquery sortable, который также может группировать элементы вместе

Мне нужно сортировать jquery со следующей функциональностью:

  1. Сортировка элементов путем перетаскивания (что является легкой частью)
  2. Группировка и разгруппировать элементы (это та часть, которую я не могу понять).

Процесс работает следующим образом:

Пользователь предоставляет список элементов. Я использую этот список для создания сортируемого неупорядоченного списка с помощью jquery.

Пример:

  • В
  • С
  • D

Затем пользователь должен использовать эту сортировку для ранжирования элементов от лучших до худших. Пользователь должен иметь возможность группировать элементы, эквивалентные (например, одинаковый ранг)

Пример:

  • До нашей эры
  • D

Желаемый поток пользовательского интерфейса:

  • Ручки и заполнители используются для перемещения элементов в сортируемом (опять же, просто, но я не уверен, как сделать все остальное)

  • Заполнитель отображается, когда пользователь наводится на существующий элемент, чтобы элементы могли быть сгруппированы вместе. Группа элементов представляет собой единый li, как показано выше.

  • Пользователь может щелкнуть и перетащить один дескриптор, чтобы переместить всю группу и другой дескриптор, чтобы удалить элемент из группы и поместить его в новое место в списке (в качестве отдельного человека, создав новый li или переместите его из одной группы в другую группа добавляет его к существующему ли).

Вещи, которые я пробовал:

  • вложенные сортируемые плагины, я не мог заставить их делать то, что мне нужно. У меня нет структуры контуров или папок, я хочу, чтобы все элементы находились на одном уровне.

  • подсоединенные sortables, я не знаю, сколько sortables создать в самом начале, я понятия не имею, если пользователь захочет сгруппировать элементы вместе и сколько групп будет в конце концов. В целом, этот подход не работал.

  • щелкните и поместите, я написал событие click для элемента. Когда пользователь нажимает на элемент, все возможные заполнители становятся видимыми, а затем пользователь выбирает местозаполнитель, и элемент перемещается в этот заполнитель. Он работает нормально, но я бы очень хотел использовать более интуитивное перетаскивание.

Я открыт для других подходов или html-структур для моего списка, если он будет работать, как я описал в начале.

Любая помощь очень ценится! Спасибо!!

3 ответа

Если я правильно вас понимаю, я думаю, что у меня есть решение для вашей проблемы.

Прежде всего, для этого нужно использовать некоторые серверные языки (например, php), а для создания групп и элементов вы должны использовать некоторую базу данных (например, mysql). В вашей базе данных вам нужно создать две таблицы "Элементы и группы" и установить между ними одну (группу) и многие (элементы). Когда вы это делаете, вам нужно получить группы и элементы со своим языком на стороне сервера и отобразить их для вашей сортируемой части.

Вам необходимо отобразить группы и элементы, подобные этому:

for($i = 0; $i < $groups; $i++)
{
 echo '<ul id="group_'.$i.'" group_id="'.$groups[$i]->getId().'">';
 echo '<li>'.$name_of_group.'</li>'; - this item needs to be disabled for drag and drop and you can do that for any individual item with sortable ui plugin
 for($j = 0; $j < count($items); $j++)
 {
 echo '<li id="'.$items[$j]->getId().'">'.$item.'</li>';
 }
 echo '</ul>';
}

Это один из способов, которыми вы можете группировать свои предметы и манипулировать ими.

И это код javascript для управления элементами.

$(function() {
 $( "ul.droptrue" ).sortable({
 connectWith: "ul",
 items: "> li.enabled",
 start: function(event, ui){
 var parent = ui.item.parent();
 parent.addClass('modified_ul');
 },
 stop: function(event, ui){
 var parent = ui.item.parent();
 parent.addClass('modified_ul');
 },
 update: function(event, ui){
 $('#update_channel_order').removeAttr('disabled').removeClass('button_big_disabled');
 }
});

$('#update_channel_order').click(function(){

 if (!$(this).attr('disabled'))
 {
 $('.modified_ul').each(function(){

 var array_for_db = [];
 var group_id = $(this).attr('group_id');

 var lis_enabled = $(this).children('.enabled');
 for(i = 0; i < lis_enabled.length; i++)
 {
 var id = lis_enabled[i].attributes['id'].value;
 var obj = {};
 obj['id'] = id;
 obj['index'] = i;
 array_for_db.push(obj);
 }
 $.ajax({
 url: '/path/to/your/function/group_id/' + group_id + '/values/' + JSON.stringify(array_for_db),
 beforeSend: function() {
 $('#loader_channel_order').show();
 },
 success: function(data) {
 location.reload();
 },
 complete: function() {
 $('#loader_channel_order').hide();
 }
 });
 });
 $(this).addClass('button_big_disabled').attr('disabled', 'disabled');
 }
 else
 {
 return false;
 }
 });
});


Я бы подумал, что вы можете просто сделать все другие сортируемые элементы (кроме того, что перемещается) в droppables. Тогда вы сможете отбросить движущуюся на любую из других. Затем добавьте механизм для разгруппировки, а также некоторую бухгалтерию и обслуживание дома и раскалывайте своего дядю. Я понятия не имею, как красиво сортируемая и droppable будет играть вместе, но я надеюсь, что все будет хорошо. Мы должны строить материал с этим материалом? Хорошо, что я все равно начну.


Просто мысль. Можете ли вы использовать группу optgroup для группировки значений?

licensed under cc by-sa 3.0 with attribution.