Блог

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

Элементы в списке display_only будут содержать поля ввода, поэтому в идеале элементы в «display_only» также должны перемещаться в DOM, но не обязательно.

Я перепробовал практически все, что смог придумать, например, отсоединить элемент и попытаться вставить его заново в новом порядке и так далее, Но я не могу в этом разобраться. Все, что привело бы меня в правильном направлении, было бы здорово!

Пример HTML:

 <ul id="sortable">
    <li data-id="1">Item 1</li>
    <li data-id="2">Item 2</li>
    <li data-id="3">Item 3</li>
</ul>
<ul id="display_only">
    <li data-id="1">Item 1 and som other content</li>
    <li data-id="2">Item 2 and som other content</li>
    <li data-id="3">Item 3 and som other content</li>
</ul>
  

Здесь нет реальной необходимости использовать массивы. Но вы можете легко интегрировать определяющие элементы массива среди этого.

  $('#sortable').sortable({
        start: function(event, ui){
                iBefore = ui.item.index();
        },
        update: function(event, ui) {
                iAfter = ui.item.index();
                evictee = $('#display_only li:eq(' iAfter ')');
                evictor = $('#display_only li:eq(' iBefore ')');

                evictee.replaceWith(evictor);
                if(iBefore > iAfter)
                    evictor.after(evictee);
                else
                    evictor.before(evictee);
        }
 });
  

Я уверен, что запись его в функцию и передача родительских селекторов в качестве аргументов более подходит.

как насчет использования метода $.fn.clone() для клонирования отсортированного ul и запуска клона при каждой сортировке с помощью

 $('#sortable').bind('sort', function(e,ui){
   $newlist = $(this).clone();

   $('#display_only').remove();   //removing the old list
   $newlist.attr('id','display_only'); // giving the right id for the cloned element
   $(this).append($newlist)

});
  

обратите внимание, что я не уверен в точном синтаксисе, который вам нужно исследовать, но я думаю, что это должно сработать

обратите внимание, что сортируемый пользовательский интерфейс jquery содержит множество событий, и вы должны связать правильные для вас события сортировки пользовательского интерфейса jquery. Я подозреваю, что «stop», «beforeStop» или «change» будут правильными

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

 $('#sortable').bind('sort', function(e,ui){
   $("#display_only).sortable()

});
  

простой и элегантный

После небольшой настройки я заставил его работать. Я не уверен, что это лучший способ решить эту проблему, но это работает. При остановке я вызываю свою функцию для изменения порядка элементов в «#display_ only», которая перебирает новый порядок и помещает его в массив.

После этого я перебираю свои элементы в «#display_only» и отделяю их в том же порядке, а затем просто добавляю их в свой список, вот так:

 function reorder() {
    var newOrder = [];
    $('#sortable li').each(function(i) {
         newOrder.push($(this).attr('data-id'));
    });
    $('#display_only li').each(function(i) {
         var item = $("li[data-id=" newOrder[i] "]").detach();
         $('#display_only').append(item);
    });
}