0

サード パーティ製のコントロール (タブ付きコントロール) に、ドラッグ アンド ドロップでタブを並べ替える機能を追加しています。選択したタブのみを移動できるようにする必要があります。このために、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/

4

1 に答える 1