9

以下のフィドルをご覧ください。

http://jsfiddle.net/ujdsu/

HTML、単純な順序なしリスト：

<ul class="sortable">
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ul>

jquery：

$(function() {      
   $( ".sortable" ).sortable({
       axis: 'y' 
   }).disableSelection();
});​

CSS：

ul{
    margin:20px 0 0 20px;
    border:1px solid #000;
    width:70%;
    overflow:hidden;
    position:relative;
}
li{
    background:#ccc;
    border-top:1px solid #000;
    padding:10px 5px;
    cursor:move;
}   
li:first-child{
    border-top:0;
}

</ p>

デフォルトでは、アイテムをコンテナの外にドラッグできます。コンテナに「overflow：hidden」を追加することでこれを修正しましたが、コンテナの外側にアイテムをドラッグすることはできます。外側の部分は表示されません。以下のスクリーンショットをご覧ください。

ここに画像の説明を入力してください

私が達成したいのは、アイテムがコンテナの上端または下端に当たるとすぐにそれ以上アイテムを移動できないようにすることです。そのため、上のスクリーンショットに示されている結果は表示されません。理想的には、「3番目のアイテム」は上端に当たり、それ以上移動しません。

ありがとう

4

1 に答える 1

24

包含オプションを渡す必要があります。

$(function() {      
    $( ".sortable" ).sortable({
       axis: 'y',
       containment: "parent" 
    }).disableSelection();
});​

コードを使用した実際の例を次に示します: http://jsfiddle.net/VzpBq/

Sortable jQueryUI APIcontainmentからのオプションの定義:

ドラッグ中に並べ替え可能なアイテムが拘束される境界ボックスを定義します。

于 2012-11-03T01:00:37.020 に答える