Question

我是Jquery的新手，正在努力解决如何解决我的问题。

我有两个无序列表，列表A和列表B.列表A可以使用.sortable（{axis：'y'}）方法进行排序。当列表A被重新排序时，我想自动重新排序列表B（不是用户可排序的）以反映列表A中的更改。

我很难知道从哪里开始，如果有人可以提供帮助，那将非常感激。

由于

更新：这是我页面中的一些额外代码，用于将内容置于上下文中。

<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>

这两个列表将包含相同的项目和相同数量的项目，最终我想添加功能，如果列表项目被删除或插入到列表A中，相应的项目将被删除或添加到列表中B.

从设计的角度来看，列表A代表用户对列表B中内容的概述，因此他们可以在一侧重新排序和更改简化列表的内容，并将这些更改反映在更详细的内容中列表另一方。

希望这有帮助。

再次感谢您的帮助。

Answer 1

使用更新事件对其他列表进行排序

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

然后你需要循环'你的第一个列表并移动你的第二个列表中的项目，如果你提供HTML / JS，我们可能会帮助你。

尝试jsfiddle.com

Answer 2

不确定您是将数据存储为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 */     
            }   
       }    
});

Answer 3

这是一个完整的解决方案，适用于您的精确标记：

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

function sortListB(){

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

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

    });
}

在此处查看此操作： http://jsfiddle.net/LnvEM/1/

它是如何工作的？一个接一个，你按照从上到下的顺序遍历列表A中的每个项目，从列表B .remove()中删除相应的项目，然后重新将其附加到列表B .appendTo($('#listB'))的后面。对B中的每个项目执行此操作后，您开始使用的项目将位于顶部，等等。

（注意：在列表B中的项目中添加了额外的文本，以便在视觉上区分它们，并指出它在列表A中跟踪的每个项目。但是，解决方案不是必需的。）

根据第二个列表的顺序对一个列表进行排序

3 个答案: