1

jQuery-Ui の sortable を使用していますが、行き詰っています。あるリストの内容を並べ替えることができますが、新しく並べ替えられた以前のリストに基づいて別のリストの順序に影響を与える方法がわかりません。

基本的には #smalllist を並べ替えて、並べ替えが完了したら #biglist を #smalllist の順番で自動並べ替えして、すぐに 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>
4

1 に答える 1

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');
            });
        }
    });
});
于 2013-05-23T01:20:42.607 に答える