Hello @camohub! Thanks for a great plugin, this has saved me hours of dev work. :)

One issue though: the maxLevels options is not working. When I set it to a number, it stops nesting altogether. If I remove the maxLevels option (it defaults to false), it starts nesting again.

Please advise. Thanks!

Hi! Checking this out.

I noticed that if an item is already below other items in a group. Then dragging it right does not nest it under the item above it. Possible/How? Thx!

Example:

item1 item2 item3

drag item3 right

item1 item2 -> item3

dragging item3 right does not nest it under the above item, item2

Currently you have to drag it on top of a group of items above it.

And if it's already the bottom item, then it's not something a user might quickly understand to do. They may just try to drag it to the right. Since it's already below that item.

How can I do? Thx!

As far as I see, inserting nested element is based on insertZone threshold currently. User has to move the mouse some distance from the left edge of the element and if this distance is above the threshold, dragged element is inserted as a child to hovered one.

We could add optional feature that allows to change (or extend) this behavior (from UX perspective): when user hovers the element, dragged one becomes its child. In my case all attempts to simulate this by changing insertZone made widget unusable (ex. when value is 0 there was no way to reorder elements).

Technically we may reuse the mechanism and create something like 'vertical insert zone'. If the mouse is close enough to the vertical center of hovered element, dragged one will become its child when dropped, otherwise elements are reordered.

See attached image for explanation.

What do you think?

I would like to persist the menu in case the position was changed after a drop. I implemented this in the 'complete' callback but I see that this callback is also called after just clicking a menu-item and not only after a drop to another position as expected.

Add functionality to use HTML code for the open and close openers content by setting opener.as = 'html', allowing for example to use font-awesome icons by writing options like this :

    options =
      ...
      opener:
        active: true
        as: 'html'
        close: '<i class="fa fa-plus"></i>'
        open: '<i class="fa fa-minus"></i>'
        openerCss:
          'float': 'left'
          'margin-left': '-27px'
          'margin-top': '1px'
          'cursor': 'pointer'

    $('ul#hierarchy-tree').sortableLists options

For info :

On my config (in flex li) opener appear at the end if I move item on nexw submenu.

I change :

if ( hintWrapperNode.length )
{
		hintWrapperNode.prev( 'div' ).append( opener.clone( true ) );
}

by

if ( hintWrapperNode.length )
{
	if( setting.opener.position == "after" )
		hintWrapperNode.prev( 'div' ).append( opener.clone( true ) );
	else
		hintWrapperNode.prev( 'div' ).prepend( opener.clone( true ) );
}

And add option open.position on setting

I want to use add and remove li list. I can add easily with jquery but i don't know how to add delete button as open/close like button. How can i do it ?

Hey there! Thanks for this awesome library. I am using it to implement a system where upon clicking on a button, a new list item is added to the main ul. Now, the item does get appended but it doesn't receive the icons for the openers that i set in the options. I can see the list item and it's always opened without the '+' or '-' signs so i can't open or close that particular list item. Can you let me know how that would be done as the only way i found is to re-create the Sortable List using $('element').sortableLists({ options }) but that appends the '+' and '-' icons to each and every list item multiple times

I have an ajax process where I download the hierarchy and the items first. Then I populate my list dynamically. But the collapse and expand doesn't seem to work.

So I'm facing a problem where if an item is child I can't move to the outermost level. For example if the list consist of one item with a child. I'm not able to make that child a sibling of it's parent. Any idea on how I can make this possible?

Hi!

Plugin is awsome, I have integrated successfully with no many issues but I have last one that still give me a headache.

I have defined this callback on drop completion:

complete: function(currEl)
            {
                var $tree = $sortable.sortableListsToArray();
                $.ajax({
                    url: '{{ path('admin_category_sort_component') }}',
                    type: 'POST',
                    data: { data : $tree},
                    success: function(data) {
                        //console.debug(data);
                    }
                });
            }

But sortableListsToArray function gave me an element with 'sortableListsPlaceholder':

...
    [order] => 0
 )
[2] => Array
(
    [id] => sortableListsPlaceholder
    [parentId] => 92
    [order] => 0
)
...

Seems sortableListsToArray is not waiting to id restore after drop completion.

I need export tree data on drop finish in order to save hierarchy automatically.

I'm making anything wrong maybe?

Thanks in advance.

Greetings again @camohub!

I've noticed an issue that appeared in this new version 2.2.0. Whenever we have a sortable list initialized with some value for maxLevels, any new item that is later appended to the list cannot be dragged into a new position. I've set an example on my forking so you can see for yourself:

https://lucaslm.github.io/jquery-sortable-lists/example3

The reason for this error is because you changed how to compute the level an item would have when dragged to a new position. Specifically, upon initializing the list you add some data to every item, namely 'inside-levels' and 'upper-levels'.

https://github.com/camohub/jquery-sortable-lists/blob/aba9cb1c95b9ae4e88c844c93d25e40f96e4c75c/jquery-sortable-lists-mobile.js#L181-L192

Later on the function checkMaxLevels, you get 'upper-levels' from the new parent and 'inside-levels' from the item being dragged. You then add those to see if it exceeds maxLevels. Since items created later do not have 'inside-levels', the sum evaluates to NaN and the expression to false, even when it shouldn't.

https://github.com/camohub/jquery-sortable-lists/blob/aba9cb1c95b9ae4e88c844c93d25e40f96e4c75c/jquery-sortable-lists-mobile.js#L989-L995

This can be avoided if you do not insert new items, but it wasn't an issue when insideLevs was computed at startDrag for the item being dragged, and upperLevs at its dropping, though it could be less performatic.

I suppose there are two approaches for this. We can create a new option to control how maxLevels is computed, to let the user choose whether to compute the levels on the fly ineficiently (but allowing later item insertions) or to store the levels on initialization. The other approach is to use a MutationObserver to store an item's levels each time it is included on the list's DOM after initialization.

Let me know which approach you think is best, and I can create a pull request for this issue.

I have used draggable items in fix envelopes with set ignoreClass. After the jquery-sortable-lists upgrade it has stopped working and I have to freeze it to old version.

What about some option to define ignoreClass behavior?

Or allow to define ignoreClass and ignoreClosestClass or on other way ignoreClass and ignoreWithClass. Simply two conditions in code.

Greetings @camohub!

Firstly, thanks for the awesome plugin. Unfortunatelly I found an issue with it, but I believe it can be addressed. When dragging an item to the edge of the screen, it automatically scrolls the window to continuing moving the item up or down. This works mostly fine, but I noticed that when one or more ancestors of the list element also have scroll bars of their own, this becomes an issue. Here are some examples I have on my forking of the project:

• https://lucaslm.github.io/jquery-sortable-lists/example1
• https://lucaslm.github.io/jquery-sortable-lists/example2

Fortunatelly, the following pull request solves this issue. I've tested it on many browsers and it seems to work. I've commited from the dev branch, which I think is the one you use for bug fixing and improvements

https://github.com/camohub/jquery-sortable-lists/pull/61

Fixing issue with multiple scrolling ancestors.

A few demonstrations of the issue can be found at:

• https://lucaslm.github.io/jquery-sortable-lists/example1
• https://lucaslm.github.io/jquery-sortable-lists/example2