jQuery排序自定义规则

jQuery sortable with custom rules

本文关键字：规则 自定义 排序 jQuery      更新时间：2023-09-26

我有一个HTML表，其中有很多类遵循分层规则:" category "> "family"> "group"> "item"

我想在这个表上实现jQuery可排序的小部件(确切地说是tbody)，但是使用自定义规则，我不能使工作:

  • "item"只能放在另一个"item"的顶部或下面
  • "group"只能放在另一个"group"的上面或者"family"的下面
  • "family"只能放在另一个"families"的上方或"categories"的下方
  • "category"只能放在另一个"category"的上面

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

换句话说，我在寻找一个函数，告诉在拖动过程中排序"是(否)你可以(不能)在这里拖放"，因此显示或不显示占位符。

我找到了一个解决方案，也许不漂亮，但它工作:

        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'为hierarchi的级别(这里:category => 1, family => 2…)

相关文章：