JQuery手风琴+可排序。禁止父组可拖动

Question

我有一个按其部分分组并使用手风琴折叠的搜索选项列表。用户展开一个部分并将他们的选择拖到“已保存列表”。这些字段被保存并用于我网站中表格上的自定义列。除了一些小事情之外，一切都很好。

1. 我想锁定父母（个人、教育、学科），并且只有里面的 li 元素是可拖动的。现在用户可以将整个组拖到顶部，这是不可取的，因为我对他们可以搜索的字段有限制。拖动整个部分可能会超出该限制并破坏我的表格。

2. 在 IE 中，折叠父元素后，li 元素会“闪烁”一秒钟，然后才会隐藏。 没什么大不了的，但可能会很烦人，尤其是对我的一些挑剔的用户来说:)

代码如下。有关样式，请参阅我的设置的 Fiddle。

我已经到了只见树木不见森林的地步，所以如果我能指出正确的方向，那将不胜感激！

HTML：

<div class="demo">
    <div id="swaplist" style="height: 0;"></div>
    <ul id="sortable2" class='saved'>
        <div class="container" style="overflow:auto;">
            <div align='center'>
                 <h2>Saved List</h2>

            </div>
            <div class="group"></div>
        </div>
    </ul>
    <br />
    <ul id="sortable1" class='available'>
        <div align='center'>
             <h2>Available Fields</h2>

        </div>
        <br />
        <div id="accordion" style="width:950px;">
            <div class="group">
                 <h2><span class="text"><a href="#">Personal</a></span></h2>

                <div class="container">
                    <ul id="sortable1" class='available' style="width:850px;">
                        <li class='ui-state-default'><b>First Name</b>

                            <br />Section: A</li>
                        <li class='ui-state-default'><b>Last Name</b>

                            <br />Section: A</li>
                        <li class='ui-state-default'><b>Date of Birth</b>   
                            <br />Section: A</li>
                    </ul>
                </div>
            </div>
            <br />
            <div class="group">
                 <h2><span class="text"><a href="#">Education</a></span></h2>

                <div class="container">
                    <ul id="sortable1" class='available' style="width:850px;">
                        <li class='ui-state-default'><b>Associate's</b>

                            <br />Section: B</li>
                        <li class='ui-state-default'><b>Bachelor's</b>

                            <br />Section: B</li>
                        <li class='ui-state-default'><b>Master's</b>

                            <br />Section: B</li>
                        <li class='ui-state-default'><b>Doctorate</b>

                            <br />Section: B</li>
                        <li class='ui-state-default'><b>Other</b>

                            <br />Section: B</li>
                    </ul>
                </div>
            </div>
            <br />
            <div class="group">
                 <h2><span class="text"><a href="#">Subject</a></span></h2>

                <div class="container">
                    <ul id="sortable1" class='available' style="width:850px;">
                        <li class='ui-state-default'><b>Science</b>

                            <br />Section: C</li>
                        <li class='ui-state-default'><b>Business</b>

                            <br />Section: C</li>
                        <li class='ui-state-default'><b>Liberal Arts</b>

                            <br />Section: C</li>
                    </ul>
                </div>
            </div>
            <br />
        </div>
        <!-- End accordion -->
    </ul>
    <br clear="both" />
</div>

javascript：

$(function () {

    $("#accordion")
        .accordion({
        active: false,
        collapsible: true,
        animate: false,
        heightStyle: "content",
        autoHeight: false,
        header: "> div > h2"
    })
        .sortable({
        axis: "y",
        handle: "h2",
        stop: function (event, ui) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children("h2").triggerHandler("focusout");
        }
    });


    $("ul.available").sortable({
        connectWith: "ul",
        scroll: true,
        helper: 'clone', //keeps children visible when pulling out of container
        appendTo: '#swaplist' //temporarily stores children in hidden div
    });

    $("ul.saved").sortable({
        connectWith: "ul",
        receive: function (event, ui) {

            if ($(this).children().length > 9) {
                //ui.sender: will cancel the change.
                //Useful in the 'receive' callback.
                $(ui.sender).sortable('cancel');
            }
        },
        items: "li[id!=nomove]",
        update: function () {
            var order = $(this).sortable("serialize") + '&action=update';
            $.post("ajax_file", order, function (theResponse) {
                $("#info").html(theResponse);
            });
        },
        helper: 'clone', //keeps children visible when pulling out of container
        appendTo: '#swaplist' //temporarily stores children in hidden div
    });

    $("#sortable1, #sortable2").disableSelection();
    $("#sortable1, #sortable2").disableSelection();
});

更新：

我发现了我需要解决的第三件事。我需要确保用户没有选择重复的选项。请参阅下面的答案。

Answer 1

我想出了一个方法来锁定父母！这可能不是最理想的方式，但它确实有效。查看完整的 Fiddle here。

对于#1，我在How to implement a button on a jQuery Sortable accordion header 应用了答案以锁定父母。我创建了一个名为“DontMove”的类并将它们放在<h2> 上，然后在每个可排序cancel: ".DontMove" 中将其设置为我的取消选项。下面是实现它的sn-p。

    $("#accordion")
        .accordion({
        active: false,
        collapsible: true,
        animate: false,
        heightStyle: "content",
        autoHeight: false,
        header: "> div > h2"
    })
        .sortable({
        axis: "y",
        handle: "h2",
        cancel: ".DontMove",
        stop: function (event, ui) {
            ui.item.children("h2").triggerHandler("focusout");
        }
    });

对于#3，感谢prevent duplicated item in jQueryUI sortable，有一个解决方案。

这个 sn-p 是什么伎俩。我把它放在接收部分。

    var id = ui.item.attr('id');
    var ele = $('#sortable2').find('li[id="'+id+'"]');
    if (ele.length != 1) {
        $(ui.sender).sortable('cancel');
    }

问题最初是在可排序接收函数触发并添加新元素之前，我无法在已保存列表中获取当前元素的列表。所以每当我检查添加的元素是否已经存在时，它总是会取消，因为它已经添加了，从而满足条件。

我没有与之抗争，而是得到了所有具有相同 id 的行元素。如果有超过 1 则长度 > 1 所以取消丢弃。我知道拥有重复 ID 不是一个好习惯，但由于列表是数据库驱动的，因此有可能发生这种情况，我想涵盖所有基础。

至于 issue #2，我认为它不会在 Firefox 或 Chrome 中发生，所以我将不理会它，因为我最担心 #1 和 #3。