jQuery UI:仅允许在其自己的父级别内进行排序，而不可以在其上或下进行排序 [英] jQuery UI: Only allow sortable within its own parent level, and not above or below

问题描述

我基本上使用列表结构，试图使每个li在其自身级别内可排序，但不在其他级别内排序.因此，如果我向下拖动Number 1，它将不会与任何sub ul或li混合，而只会低于Number 2.这是我到目前为止的内容，虽然它确实可以防止li's超出其水平，但并不能防止li's低于其水平.例如，现在我可以在Number 2.1和Number 2.2

Basically using a list structure, I'm trying to make each li sortable within it's own level, but not within other levels. So if I'm dragging down Number 1 it won't mix with any of the sub ul's or li's but will only go below Number 2. This is what I have so far, and while it does prevent li's from going ABOVE it's level, it doesn't prevent li's from mixing BELOW it's level. For example right now I can move Number 1 between Number 2.1 and Number 2.2

$(".sortable2, .sortable2 ul").sortable({
     opacity: 0.5,
        stop:function(i){
            $.ajax({
                type: "GET",
                url: "?",
                data: $(this).sortable("serialize")
            });
        }
});



$(".sortable2").selectable();
$(".sortable2").disableSelection();


$('.sortable2').bind('mousedown', function(e) {
     e.stopPropagation();
});

这是ul li结构:

<ul class="sortable2">
    <li>Number 1
        <ul class="sortable2">
            <li>Number 1.1</li>
            <li>Number 1.2</li>
        </ul>
    <li>
    <li>Number 2
        <ul class="sortable2">
            <li>Number 2.1</li>
            <li>Number 2.2
                <ul class="sortable2">
                    <li>Number 2.2.1</li>
                    <li>Number 2.2.2</li>
                </ul>
            </li>
        </ul>
    <li>
</ul>

推荐答案

您的HTML和选择器都被搞砸了.我已经在这里为您清理了.请注意，您需要为不同级别的可排序项定义不同的类名，或者至少确保它们不会由同一选择器返回.请查看此链接以获取固定的实现: http://jsfiddle.net/GMUbj/

Your HTML and selectors are both really screwed up. I've cleaned it up for you here. Note that you need to define different class names for the different levels of sortables, or at least make sure that they are not returned by the same selector. Check out this link for a fixed implementation: http://jsfiddle.net/GMUbj/

您还可以调整选择器，这样您就不必继续定义类名并完全避免整个混乱，例如:

You could also tune the selectors so you didn't have to continue defining class names and avoid this whole mess altogether, as in: http://jsfiddle.net/HWmz3/

如另一个答案中所述，如果您想将css类应用于要排序的所有列表，也可以使用items选项为单个子列表启用或禁用此功能(请注意，我将类关闭了)关闭大多数项目，以便您了解其工作原理): http://jsfiddle.net/DnaBs/

As noted in another answer you could also turn this on or off for individual sublists using the items option if you want to bother to apply a css class to all of the lists you want to sort (note that I left the class turned off on most of the items so you can see how it works): http://jsfiddle.net/DnaBs/

这篇关于jQuery UI:仅允许在其自己的父级别内进行排序，而不可以在其上或下进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！