アイテムを除外したソート可能なリストにアイテムをドロップする

Question

ソート可能なリストを複数接続しているので、1つのリストから1つのアイテムをドラッグして別のリストに置くことができます。すべてのリストには、ソート可能でもドロップターゲットでもない、その下に1つのアイテムがあり、その下にアイテムをドロップすることは不可能です。

これは意図された使用です。私は、各リストの最後にある除外されたアイテムを常に下部に置いておきたいと思います。

問題点は、リストを空にして、そのアイテムのすべてをドラッグして別のリストに配置すると、残りのアイテムは並べ替えられないアイテムになります。新しいアイテムをドラッグすると、ソートできない、ドロップ対象ではないアイテムの下に常に下に移動します。

新しいアイテムをソート可能でないドロップターゲットのアイテムが1つしかないソート可能なリストにドロップすると、リストの一番上に置くことは可能ですか？

例コード：

$('.segment ol').sortable({ 
    connectWith: '.segment ol', 
    distance: 25, 
    items: 'li:not(.disabled)' 
}); 

HTML：あなたはそれが無効の下に追加さになるだろう、他のリストに "単語単語単語" 李をドラッグした場合

<div class="segment"> 
     <ol> 
     <li>word word word</li> 
     <li>word word word</li> 
     <li class="disabled">must stay at bottom</li> 
     </ol> 
    </div> 
    <div class="segment"> 
     <ol> 
     <li class="disabled">must stay at bottom</li> 
     </ol> 
    </div> 

li。

あなたがソート可能なリスト（あなたがオプションを提供）の「受信」イベントを使用して、このような何かを行うことができます

Answer 1

：

$('.segment ol').sortable({ 
    connectWith: '.segment ol', 
    distance: 25, 
    items: 'li:not(.disabled)', 
    over: function(event,ui){ ui.placeholder.insertBefore($(this).children('li.disabled:first')); } 
}); 

現在ドラッグされた要素がリストに自分自身を付加なります（先頭に追加最初に複製しない限り、prependToは効果的にアイテムを移動します）。

Answer 2

これは物事のハック側にあるかもしれませんが、各リストの上部に0pxの高さのソート可能なアイテムを追加するか、display: noneとすることができます。これにより、アイテムはソート不可能なアイテムの代わりにそのアイテムの後ろにソートされます。

<ol> 
    <li class="hidden"></li> 
    <li>word word word</li> 
    <li>word word word</li> 
    <li class="disabled">must stay at bottom</li> 
</ol> 

CSS：

.hidden { 
    display: none; 
} 

http://jsfiddle.net/HPM7V/2/