根据css类限制div的拖动

Question

我使用下面的代码来安排我的div：

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

是否可以修改此代码以排除可以排序（移动）的div，其中包含特定的css值：

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

Answer 1

您可以使用:not()定位没有myDivs类的excludeThisCss类：

查看此工作Fiddle Example!

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>

JQUERY

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

在小提琴示例中，您可以拖动所有.myDivs项，但.excludeMe类的项目不会移动！