2

複数のULを使用してjqueryUIのネストされたソータブルを実装しようとしています。以下はコードです、

   <html>
    <head>
    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){   
    $("#example5 ul").sortable({
                    connectWith: "#example5 ul",
                    placeholder: "ui-state-highlight"
    });

    $("span.item-controls").click(function(){
        //alert($(this).parent().next('div').attr('class'))
        var v = $(this).parent().next('div.panel');
        v.slideToggle("slow");
      });

    });
    </script>
    <style>
    ul { 
        min-height:10px; 
        }
    li {
        margin:5px;
        width:auto;
        border:1px solid #000;
        list-style-type:none;
        cursor:move;
    }

    #example5 {
          display: inline-block;
          float: left;
          position: relative;
          width:900px;
    }
    .fright
    {
          float:right;
    }
    .item-controls {
          cursor: pointer;
          font-size: 12px;
          position: relative;
          right: 20px;
          top: 5px;
          background: url("images/arrows.png") no-repeat scroll transparent;
          xborder: 1px solid #000;    
          background-position:3px 0px;
          width:20px;
          height:15px;
    }.ui-sortable{
    margin:0px;padding:0px;
    }
    .ahead
    {
         margin:0px;
    }
    div.panel
    {
        height:auto;
        display:none;
    }
    div.panel
    {
        margin:0px;
        text-align:center;
        background:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    </style>
    </head>

    <body>
    <div id="example5"><!--UL1-->
        <ul style="width:32%;float:left;" class="navigation">
             <li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1</p>
                    </div>
                <ul>
                    <li >
                    <p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1 1</p>              
                    </div>              
                    <ul></ul></li>
                    <li >Item 1 2<ul></ul></li>
                    <li >Item 1 3<ul></ul></li>
                 </ul>

             </li>
             <li >
             <p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
                    <div class="panel">
                        <p>This is Item 2</p>       
                    </div>       
             <ul><li >Item 2 1<ul></ul></li></ul>
             </li>
             <li >Item 3<ul></ul></li>
             <li >Item 4<ul></ul></li>
        </ul>
    <!--UL2-->
        <ul style="width:32%;float:left;"  class="navigation2">
             <li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1</p>
                    </div>
                <ul>
                    <li >
                    <p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1 1</p>              
                    </div>              
                    <ul></ul></li>
                    <li >Item 1 2<ul></ul></li>
                    <li >Item 1 3<ul></ul></li>
                 </ul>

             </li>
             <li >
             <p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
                    <div class="panel">
                        <p>This is Item 2</p>       
                    </div>       
             <ul><li >Item 2 1<ul></ul></li></ul>
             </li>
             <li >Item 3<ul></ul></li>
             <li >Item 4<ul></ul></li>
        </ul>
<!--UL3-->
           <ul style="width:32%;float:left;"  class="navigation3">
             <li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1</p>
                    </div>
                <ul>
                    <li >
                    <p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1 1</p>              
                    </div>              
                    <ul></ul></li>
                    <li >Item 1 2<ul></ul></li>
                    <li >Item 1 3<ul></ul></li>
                 </ul>

             </li>
             <li >
             <p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
                    <div class="panel">
                        <p>This is Item 2</p>       
                    </div>       
             <ul><li >Item 2 1<ul></ul></li></ul>
             </li>
             <li >Item 3<ul></ul></li>
             <li >Item 4<ul></ul></li>
        </ul>
    </div>
    </body>
    </html>

これまでのところ、期待どおりの結果が得られました。今私の要件は、FromUL-1を並べ替えることはできません。fromUL-2 and UL-3もUL-2,UL-3一緒に並べ替えることはできません。要件を理解してください。それは可能ですか。これについて親切にアドバイスしてください。

4

2 に答える 2

2

このように使ってみてください

$("#example5 ul").sortable({
    connectWith: "#example5 ul.navigation *",
    placeholder: "ui-state-highlight"
});

したがって、ターゲットは常にメインの UL になり、残りはソート可能な要素のみになります。

ノート：

このソリューションを使用するために、html パーツに別のクラス名を追加しました。

于 2012-04-18T09:21:10.020 に答える
0

たとえば、「コンテナ」を設定する必要があります。

$("#example5 ul").sortable({
                connectWith: "#example5 ul",
                placeholder: "ui-state-highlight",
                containment: "#selector"
});

詳細については、これを確認してください。

于 2012-04-17T16:29:17.967 に答える