Question

I use the below code to arrange my divs :

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

Is it possible to amend this code so as to exclude divs that can be sorted(moved) which contain a particualar css value :

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

Answer 1

You can use :not() to target the myDivs class that don’t have the excludeThisCss class:

See this working Fiddle Example!

HTML FOR THE EXAMPLE

<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>

JQUERY

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

On the Fiddle example, you will be able to drag all .myDivs items, but the ones with .excludeMe class will not move!