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>

查询

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

在 Fiddle 示例中，您将能够拖动所有.myDivs项目，但具有.excludeMe类的项目不会移动！