gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 21:44:48 24 4
gpt4 key购买 nike

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

非常感谢(并赞成)任何有助于做到这一点的提示!

谢谢,

桑德罗

最佳答案

我认为你可能把这个复杂化了。我认为您实际上不需要知道有多少个级别。尝试向“禁用”元素添加一个类。然后你可以像这样让所有东西都可以排序:

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

更新:由于您不能将类添加到“已禁用”元素,请尝试以下操作:

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

更新 fiddle here .为了便于说明,我还使用相同的选择器将所有“禁用”元素都涂成了红色。

关于javascript - 多个嵌套级别的 jQuery UI 可排序取消选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31613338/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com