javascript - css クラスに基づいて div のドラッグを制限する

Question

以下のコードを使用して div を配置します。

$( ".myDivs" ).sortable({
    connectWith: [".myDivs"]
});

特定の css 値を含むソート (移動) 可能な div を除外するように、このコードを修正することは可能ですか?

<div class="myDivs excludeThisCss"><Excluded From Move></div>

Answer 1

:not()を使用して、myDivsクラスを持たないクラスをターゲットにすることができますexcludeThisCss:

この実用的なフィドルの例を参照してください!

例の HTML

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
</div>

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
</div>

Jクエリ

$(function() {
    $( ".connected" ).sortable({
        connectWith : ".connected",
        items       : ".myDivs:not(.excludeThisCss)"
    }).disableSelection();
});

.myDivsFiddle の例では、すべてのアイテムをドラッグできますが、.excludeMeクラスのあるアイテムは移動しません!