Question

我有一个HTML表，其中有很多关于类的分层规则：＆＃34; categorie＆＃34; ＆GT; ＆＃34;家庭＆＃34; ＆GT; ＆＃34;组＆＃34; ＆GT; ＆＃34;项目＆＃34;

我想在这个桌子上实现jQuery可排序小部件（确切地说是tbody）但是我不能使用自定义规则：

＆＃34;项目＆＃34;只应放在另一个＆＃34;项目＆＃34;
＆＃34;组＆＃34;应该只放在anoter＆＃34; group＆＃34;或者在＆＃34;家庭＆＃34;
＆＃34;家庭＆＃34;应该只放在另一个＆＃34;家庭＆＃34;或在＆＃34;类别＆＃34;
＆＃34;类别＆＃34;只应该放在另一个＆＃34;类别＆＃34;

在排序元素时保持层次结构。

换句话说，我正在寻找一种能够在拖动过程中告诉可排序的功能，是（否）你可以（不能）放在这里＆＃34;所以显示或不显示占位符。

Answer 1

我找到了一个解决方案，可能并不漂亮，但它有效：

        var isValidPlacement = true;
        $('#input-table tbody').sortable({
            placeholder: {
                element: function (currentItem) {
                    return $('<tr id="placeholder"/>')[0];
                },
                update: function (container, p) {
                    return;
                }
            },
            change: function (event, ui) {
                var placeholder = document.getElementById('placeholder');
                var currentLevel = $(placeholder).data('level');
                var prev = $(placeholder).prev();
                var next = $(placeholder).next();
                var prevLevel = prev ? prev.data('level') : 0;
                var nextLevel = next ? next.data('level') : 0;

                // If prevLevel > nextLevel
                //    then whe are at the end of a container
                //    so we can put an element of any level between those ones
                // Else if prevLevel < newtLevel
                //    then we are just at the begging of a container
                //    so we can only put an element of level == prevLevel + 1 == nextLevel
                // Finally if prevLevel == nextLevel
                //    then we are in the middle of a container
                //    so we can only put an element of level == prevLevel == nextLevel
                isValidPlacement = (
                           prevLevel > nextLevel 
                        && prevLevel >= currentLevel 
                        && currentLevel >= nextLevel
                        || 
                           prevLevel <= nextLevel 
                        && currentLevel === nextLevel);

                placeholder.style.visibility = isValidPlacement ? "" : "hidden";
            },
            stop: function (event, ui) {
                if (!isValidPlacement) {
                    $(this).sortable("cancel");
                }
            }
        }).disableSelection();

其中'level'是层次结构的级别（此处：category =＆gt; 1，family =＆gt; 2 ...）

jQuery可以使用自定义规则进行排序

1 个答案: