0

Jquery Sortingを使用した次のhtmlコードがあります

<div class="sortable" style='width:700px; margin: 0 auto; border:2px solid; border-color:grey;'>
    <a href='#' class='expand'> Group 1</a>
<ul style="display:none" class="sortable" >
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

<a href='#' class='expand'> Group 2</a>
<ul style="display:none" class="sortable">
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
</ul>
</div>

JQuery......

<script>
    $(function() {
        $( ".sortable" ).sortable();
        $( ".sortable" ).disableSelection();
    });
</script>
<script>
$(document).ready(function() {
    $('.expand').click(function() {
        $(this).next().toggle('slow', function() {
        });
    });
});

</script>

ul 内のリストはソート可能で、aer 全体の div 内の ul もソート可能です。問題は、あるアイテムをあるグループから別のグループに移動し、そのアイテムをそのグループのアイテムの間に配置すると、ul 内に追加されますが、グループの下部またはグループのすぐ下に配置すると、 ULの外側に配置。

編集

これで、各 ul 内のリストを並べ替えることができますが、ul 全体を並べ替えることができず、アイテムをあるグループから別のグループに移動することはできません。

誰でも私を助けることができますか？ありがとう

JSFiddleで

4

1 に答える 1

0

同じIDを持つアイテムがたくさんあるため、スクリプトがおかしくなりますsortable-要素ごとに1つのIDのみを使用し、複数の要素が同じクラスを共有できます。例...

<script type="text/javascript">
    $(function() {
        $(".patents").sortable();
        $(".patents").disableSelection();
    });
</script>

<div id="sortWrap">

    <a href="#" class="expand">Group 1</a>
    <ul style="display: none;" id="ulOne" class="patents">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
    </ul>

    <a href="#" class="expand">Group 2</a>
    <ul style="display: none;" id="ulTwo" class="patents">
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
    </ul>

</div>

構文エラーのほかに、Sortableだけでは簡単に実行しようとしていることはありません。この拡張機能でネストされたリストを再配置できるようにする必要があります：https ：//github.com/mjsarfatti/nestedSortable

于 2012-06-26T20:47:21.843 に答える