jQuery UI 多个嵌套级别的可排序取消选项

Question

我想连接多个嵌套的 sortables 并定义只有具有特定 css class 的元素实际上是可排序的，而所有其他元素仍然提供作为可排序目标而不是自行排序。据我所知，我可以使用 cancel 选项来完成此操作，但我找不到一种方法来指定对所有嵌套级别都有效的选择器，因为此时我不知道级别的数量。在 this jsfiddle 它适用于第二层，但不适用于其他层。例如，在第一级中，禁用的元素仍然可以排序，而在第三级中，根本没有任何元素可以排序。

非常感谢（并赞成）任何有助于做到这一点的提示！

谢谢，

桑德罗

Answer 1

我想你可能把这个复杂化了。我认为您实际上不需要知道有多少个级别。尝试将 class 添加到 "disabled" 元素。然后你可以像这样让所有东西都可以排序：

$(function() {
    $( ".sortable" ).sortable({
                    connectWith: ".sortable",
                    cancel: ".notsortable"
    });
});

我更新了您的 fiddle，并在此处包含了完整代码：

$(function() {
    $( ".sortable" ).sortable({
        connectWith: ".sortable",
        cancel: ".notsortable"
    });
});

.sortable {
    padding-left: 20px;
    border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="sortable">
<div class="notsortable">Item 1 (disabled)</div>
<div>Item 2</div>
<div>Item 3</div>
<div class="notsortable">Item 4 (disabled)</div>
<div class="notsortable">Item 5 (disabled)</div>
<div>Item 6
    <div class="sortable">
        <div class="notsortable">Item 6.1 (disabled)</div>
        <div class="notsortable">Item 6.2 (disabled)</div>
        <div>Item 6.3</div>
        <div>Item 6.4</div>
        <div>Item 6.5</div>
        <div class="sortable">
            <div>Item 6.5.1</div>
            <div>Item 6.5.2</div>
            <div>Item 6.5.3</div>
            <div class="notsortable">Item 6.5.4 (disabled)</div>
            <div class="notsortable">Item 6.5.5 (disabled)</div>
            <div class="sortable">
                <div class="notsortable">Item 6.5.5.1 (disabled)</div>
                <div class="notsortable">Item 6.5.5.2 (disabled)</div>
            </div>
        </div>
    </div>
</div>
<div>Item 7</div>
</div>

更新： 因为你不能添加 class 到 "disabled" 元素，试试这个：

$(function() {
    $( ".sortable" ).sortable({
                    connectWith: ".sortable",
                    cancel: "div:not(.enabled,.sortable)"
    });
});

已更新 fiddle here。为了便于说明，我还使用相同的选择器将所有 "disabled" 元素都涂成了红色。

Answer 2

$(function() {
    $( ".sortable" ).sortable({
        connectWith: ".sortable",
        cancel: ".notsortable, .prueba",
cursor:move,
    });
});

.sortable {
    padding-left: 20px;
    border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="sortable">
<div class="notsortable">Item 1 (disabled)</div>
<div>Item 2</div>
<div class="prueba">Item 3</div>
<div class="notsortable">Item 4 (disabled)</div>
<div class="notsortable">Item 5 (disabled)</div>
<div>Item 6
    <div class="sortable">
        <div class="notsortable">Item 6.1 (disabled)</div>
        <div class="notsortable">Item 6.2 (disabled)</div>
        <div>Item 6.3</div>
        <div>Item 6.4</div>
        <div>Item 6.5</div>
        <div class="sortable">
            <div>Item 6.5.1</div>
            <div>Item 6.5.2</div>
            <div>Item 6.5.3</div>
            <div class="notsortable">Item 6.5.4 (disabled)</div>
            <div class="notsortable">Item 6.5.5 (disabled)</div>
            <div class="sortable">
                <div class="notsortable">Item 6.5.5.1 (disabled)</div>
                <div class="notsortable">Item 6.5.5.2 (disabled)</div>
            </div>
        </div>
    </div>
</div>
<div>Item 7</div>
</div>

jQuery UI 多个嵌套级别的可排序取消选项

jQuery UI sortable cancel option for multiple nested levels

javascript

jquery

jquery-ui

jquery-ui-sortable