Question

我正在使用jQuery-Ui的可排序，而且卡住了。我能够对一个列表的内容进行排序，但是如果根据新排序的先前列表影响另一个列表顺序，我很遗憾。

基本上，我要做的是排序#smalllist，然后当我完成排序时，根据#smalllist的顺序自动排序#biglist并让它立即显示在DOM中。这是我的代码：

<html>
<head>
    <title>Sorting Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $("#smalllist").sortable();
        });
    </script>
    <style type="text/css">

        li { 
            list-style-type: none;
            float: left;
        }
        #biglist img{
            width: 300px;
            height: 200px;
        }
        #bigpics{
            position: absolute;
            top: 400px;
        }
        #smalllist{
            cursor: move; 
        }
    </style>
</head>
<body>
    <div id="smallicons">
        <ul id="smalllist">
             <li id='s_1'><img src="img/article01_small.jpg" /></li>
             <li id='s_2'><img src="img/article02_small.jpg" /></li>
             <li id='s_3'><img src="img/article03_small.jpg" /></li>
             <li id='s_4'><img src="img/article04_small.jpg" /></li>
        </ul>
    </div>
    <div id="bigpics">
        <ul id="biglist">
             <li id='b_1'><img src="img/article01.jpg" /></li>
             <li id='b_2'><img src="img/article02.jpg" /></li>
             <li id='b_3'><img src="img/article03.jpg" /></li>
             <li id='b_4'><img src="img/article04.jpg" /></li>
        </ul>
    </div>
</body>
</html>

Answer 1

尝试这样的事情：

jQuery(document).ready(function($){
    $("#smalllist").sortable({
        update: function( event, ui ) {
            $("li","#smalllist").each(function() {
                console.log(this)
                $('#' + this.id.replace('s_','b_')).appendTo('#biglist');
            });
        }
    });
});

排序一个列表，在另一个列表中显示顺序

1 个答案: