Сортировать один список по порядку второго списка - PullRequest
Новая
       25

Сортировать один список по порядку второго списка

0 голосов
/ 23 февраля 2011

Я новичок в Jquery и изо всех сил пытаюсь решить, как решить мою проблему.

У меня есть два неупорядоченных списка, Список A и Список B. Список A сортируется с использованием метода .sortable ({axis: 'y'}). Когда список А переупорядочивается, я хотел бы автоматически переупорядочить список Б (который не сортируется пользователем), чтобы отразить изменения в списке А.

Я изо всех сил пытаюсь понять, с чего начать, если кто-то может помочь, это было бы очень признательно.

Спасибо

Обновление : вот несколько дополнительных кодов с моей страницы, чтобы поместить вещи в контекст. 

<div class="cvOverview">
                <h4>CV Overview</h4>
                <ul class="sortable" id="listA">
                    <li id="item_1" class="editContent"><span></span>About me</li>
                    <li id="item_2" class="editContent"><span></span>Personal profile</li>
                    <li id="item_3" class="editContent"><span></span>Employment history</li>
                    <li id="item_4" class="editContent"><span></span>Skills &amp; Qualities</li>
                </ul>
                <p class="backButton editButton"><a href="cv.html" title="#"><span>Completed</span></a></p>
            </div>
<div class="cvMainContent">
                <h3>Dean Bates</h3>

                <ul class="sortable" id="listB">
                    <li id="item1">
                         <div class="cvContactDetails">
                            Some text here
                        </div>
                    </li>
                    <li id="item2">
                        <div class="cvPersonalProfile">
                            Some text here
                        </div>
                    </li>
                    <li id="item3">
                        <div class="cvEmploymentHistory">
                            Some text here
                        </div>
                    </li>
                    <li id="item4">
                         <div class="cvSkillsFromJobs">
                            Some text here
                       </div>
                    </li>
                </ul>

            </div>

Два списка будут содержать одинаковые элементы и одинаковое количество элементов, в конечном итоге я хотел бы добавить функциональность, при которой, если элемент списка удаляется или вставляется в Список А, соответствующий элемент удаляется или добавляется в Список B.

С точки зрения дизайна, Список A представляет пользователю обзор того, что находится в Списке B, так что они могут переупорядочивать и изменять содержимое упрощенного списка с одной стороны и отражать эти изменения более подробно. список на другой.

Надеюсь, это поможет.

Еще раз спасибо за вашу помощь.

Ответы [ 3 ]

1 голос
/ 23 февраля 2011

Используйте событие обновления для сортировки другого списка 

$( ".selector" ).sortable({
   update: function(event, ui) { ... }
});

Затем вам нужно пройтись по первому списку и переместить элементы во второй список, если вы предоставите HTML / JS, мы можем помочь вам в этом.

попробуйте jsfiddle.com

0 голосов
/ 10 августа 2012

Вот полное решение, которое работает с вашей точной разметкой: 

$('#listA').sortable({update: sortListB});

function sortListB(){

    $('#listA li').each(function(){

        $('#listB [id=' + $(this).attr('id').replace('_', '') + ']')
            .remove()
            .appendTo($('#listB'));

    });
}

Смотрите это в действии здесь: http://jsfiddle.net/LnvEM/1/

Как это работает? Один за другим вы просматриваете каждый элемент в списке А по порядку сверху вниз, удаляете соответствующий элемент из списка B .remove() и снова присоединяете его к конец списка B .appendTo($('#listB')). Как только вы сделаете это для каждого элемента в B, тот, с которого вы начали, будет сверху и т. Д.

(Примечание: добавлен дополнительный текст к элементам в списке B для их визуальной дифференциации и указания для каждого элемента, который он отслеживает в списке A. Однако для решения этого не требуется.)

0 голосов
/ 23 февраля 2011

Не уверен, что вы просто храните данные в формате HTML или насколько сложна модель, но вот идея:

Используйте функцию сортируемого обновления: 

var userSortbaleList = $('#usersortableList');
var nonUserSortableList = $('#nonUserSortableList');

userSortbaleList.sortable({
       axis: 'y',
       update: function(event, ui) {
            $.each(userSortableList.children(), function(index, html){
                /** Need to see html or JS to do sorting */     
            }   
       }    
});
...