サード パーティ製のコントロール (タブ付きコントロール) に、ドラッグ アンド ドロップでタブを並べ替える機能を追加しています。選択したタブのみを移動できるようにする必要があります。このために、jquery ui の cancel プロパティで sortable 関数を使用しています。
コントロールには、タブ (これも div) を含む div がありますが、div タブにはさらに div が含まれています。
<div class="TabControl-Container">
<div class="ui-state-default TabControl-Tab_Selected">Tab 1
<div>tab container</div>
</div>
<div class="ui-state-default">Tab 2
<div>tab container</div>
</div>
<div class="ui-state-default">Tab 3
<div>tab container</div>
</div>
<div class="ui-state-default">Tab 4
<div>tab container</div>
</div>
</div>
タブのみが選択されている移動を制限するために、キャンセル プロパティでネガティブ セレクターを実行しています。
$(function () {
var dummy = $(".TabControl-Container");
$(dummy).sortable({
cancel: 'div :not(.TabControl-Tab_Selected)'
});
});
「Tab 1」以外のタブを無効にしていますが(問題ありません)、Tab 1 に含まれる div も無効になっていることが問題です。タブ 1 内の div (または画像のようなタグ) をドラッグできるようにするか、ホール タブを移動できないようにする必要があります。
ここで問題を確認できます: http://jsfiddle.net/WD2Rw/24/