Dragging elements causes collapsed branches to expand automatically

[louisajaca]

Options used are the following:

    $('ol.sortable').nestedSortable({
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        protectRoot: true,
        disableParentChange: true,
        isTree: true,
        startCollapsed: true
    });

When I drag a leaf node to any location, it automatically expands all collapsed branches. When I try to revert to the old _clearEmpty, everything works as expected.

Here is the old _clearEmpty:

_clearEmpty: function(item) {
            var o = this.options;

            var emptyList = $(item).children(o.listType);

            if (emptyList.length && !emptyList.children().length && !o.doNotClear) {
                o.isTree && $(item).removeClass(o.branchClass + ' ' + o.expandedClass).addClass(o.leafClass);
                emptyList.remove();
            } else if (o.isTree && emptyList.length && emptyList.children().length && emptyList.is(':visible')) {
                $(item).removeClass(o.leafClass).addClass(o.branchClass + ' ' + o.expandedClass);
            } else if (o.isTree && emptyList.length && emptyList.children().length && !emptyList.is(':visible')) {
                $(item).removeClass(o.leafClass).addClass(o.branchClass + ' ' + o.collapsedClass);
            }

        }

I wonder if anyone is having the same issue as I am.

[louisajaca]

I think I have fixed the issue using the new _clearEmpty:

_clearEmpty: function (item) {
            function replaceClass(elem, search, replace, swap) {
                if (swap) {
                    search = [replace, replace = search][0];
                }

                $(elem).removeClass(search).addClass(replace);
            }

            var o = this.options,
                childrenList = $(item).children(o.listType),
                hasChildren = childrenList.is(':not(:empty)');

            var doNotClear =
                o.doNotClear ||
                hasChildren ||
                o.protectRoot && $(item)[0] === this.element[0];

            if (o.isTree) {
                replaceClass(item, o.branchClass, o.leafClass, doNotClear);

                if (doNotClear && hasChildren) {
                    if (childrenList.is(':visible'))
                        replaceClass(item, o.collapsedClass, o.expandedClass);
                    else
                        replaceClass(item, o.expandedClass, o.collapsedClass);
                }
            }

            if (!doNotClear) {
                childrenList.remove();
            }
        }

[MSvelander]

Even with the new _clearEmpty there is an issue.

If I have all items de-collapsed.

• Then collapse 3 (not 3.1 and 3.3)
• Move 4
• De-collapse 3

3.1 and 3.3 is collapsed but with de-collapsed icon.

De-collapse 3.1 and 3.3 and the icon change to collapse-icon.

Any ideas on a solution?

[larikitty]

+1 (same issue)

[noraheuer]

I edited the _clearEmpty (v. 2.1a) This seems to work for me.

#816 because :empty includes text nodes as child elements
- hasChildren = childrenList.is(':not(:empty)');
+ hasChildren = childrenList.has('li').length;

#825-828 removed as that caused all branches of the tree to open
- if (doNotClear && hasChildren) {
-   replaceClass(item, o.collapsedClass, o.expandedClass);
- }

#832-833 remove expandedClass when childList is removed
- childrenList.remove();
+ childrenList.parent().removeClass(o.expandedClass);
+ childrenList.remove();

complete method

_clearEmpty: function (item) {
    function replaceClass(elem, search, replace, swap) {
        if (swap) {
            search = [replace, replace = search][0];
        }

        $(elem).removeClass(search).addClass(replace);
    }

    var o = this.options,
        childrenList = $(item).children(o.listType),
        hasChildren = childrenList.has('li').length;

    var doNotClear =
        o.doNotClear ||
        hasChildren ||
        o.protectRoot && $(item)[0] === this.element[0];

    if (o.isTree) {
        replaceClass(item, o.branchClass, o.leafClass, doNotClear);             
    }

    if (!doNotClear) {
        childrenList.parent().removeClass(o.expandedClass);
        childrenList.remove();
    }
}