Sortable: Problem with nested lists

Created on 5 Dec 2014  路  31Comments  路  Source: SortableJS/Sortable

I'm using nested lists:

parent list: accept from A
child list: accept from B

The problem is that when I drag an element from A into the child list, sometimes it allows me to drop it inside.

The same happens if I set the put attribute to allow only from B or if I just use the same group name for B and for the child list.

Most helpful comment

:+1: @RubaXa Thanks for a great module. Would love to see support for nesting as well ! Any idea when this might happen ?

All 31 comments

Nested lists is a separate task, which i have not tried to solve.
Create an example.

I'll provide it tomorrow

@FezVrasta ping

hi sorry I forgot about it, will try to provide it today.

Should looks like this but the error doesn't happen here...

http://codepen.io/FezVrasta/pen/ZYWPWy

Ok, to reproduce it, drag B into the red area, then try to drag A moving it between the red area and its container. You'll be able to place it both in the container and in the red area, even if it should allow to be placed only on parent

Hey, I got another example here.
I have the opposite problem - Items within the nested list are drop-able in the top list and they shouldn't be.

http://jsbin.com/hemevu/1/edit?html,js,output

@hakib Alas, there is no support for nested lists. This is one of the primary tasks in the coming year.

:+1: for nested lists. Hopes this comes soon. :)

Also interested in nested lists!

Simple workaround:

Add the following directive

.directive('ngSortable', [function() {
    "use strict";
    return function(scope, element) {
        element.on('update add remove sort', function(e) {
            e.stopPropagation();
        });
    };
}])

And disable parent sortable before use child sorting

Also running into a variant of this:

containers contain fields.
Fields should be sortable but entire containers should be sortable as well.

See: http://codepen.io/FezVrasta/pen/ZYWPWy
Sorting of fields works, sorting of containers doesn't

I had trouble with first level nesting when trying to create a sortable grid layout demo.
See: http://codepen.io/anon/pen/ogoEww
In my case the rows would not be properly sortable when the colums where set sortable too.
The problem was solved by adding:

dragoverBubble: true

to the options of the columns.
Hope this helps someone...

Would love to see this feature.

:+1: for nested lists. Need also a "drop filter" option (either string or function) to allow moving parent items only in parent list, and child items between either their own list, or other parents children lists... (or anywhere)...
(and working in angularjs ;) )

+1 for nested lists

this would be a very useful feature. i saw a comment on another thread that something may come out in february. does that mean it is being actively worked on?

Try deb-branch.

As this is closed, I suppose nested support has been implemented. Is there any documentation that I can refer to?

I can create an example if you'd like to see what am I trying to achieve.
Thanks

+1 - I'm looking for some examples but don't see anything. Some docs, or a link to the git commit would be helpful

There is version change commit from April 15: v1.2.0: Events, Nested, Drop text, IE11, iframe and etc

^Cheer, that was it. I had an older version installed. The nesting seems to work right out of the box now. No config necessary

@RubaXa Thanks for this package.. Do you have an example of dragging from list A to B in Meteor, please.

I get the duplicate error (as per https://github.com/RubaXa/Sortable/issues/241)

I tried to work out what was happening at the onAdd callback... but it only seems to have the from data and the element being dragged/added, not the sortable list it's dragging to (target).

In the Meteor example it had delete e.data._id; but doe not seem to work.

Also I need to adjust another field when it's added and was not sure of the way to get the target container.

@activestylus , you write that it works right out of the box. Can you give an example? Or are there any examples by now? Because I don't really understand how that works although I had a look into the changes for version 1.2.0 and tried out different things...
How does that work? Or are we talking about different things here?
What I want to achieve is something like this:
http://ilikenwf.github.io/example.html

@marteserede it does require a little bit of nudging. First you have to find all the nodes that have children and init Sortable class for each one. Make sure all your sortable items which have children also have dom ids so the nesting level is updated correctly

http://codepen.io/stevengarcia/pen/XmBrOe?editors=001

@activestylus Thank you very much for taking the time and giving the example. I appreciate it.

No problem dude. Code was already done - took me 5 minutes to strip down and post. Always happy to help a fellow traveler

:+1: @RubaXa Thanks for a great module. Would love to see support for nesting as well ! Any idea when this might happen ?

@RubaXa any updates when nested trees might be?

@RubaXa is there any reason for not implementing nesting support?

Hello all, just a quick ping. So are nested sortable lists possible at the moment? Not sure if this should be a part of the feature, but I'd thought it should have the flexibility to be able to achieve this with reasonable amount of code?

Thanks all!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rakeshrockb picture rakeshrockb  路  3Comments

FINDarkside picture FINDarkside  路  3Comments

kaermomo picture kaermomo  路  3Comments

artaommahe picture artaommahe  路  4Comments

jkrasnay picture jkrasnay  路  3Comments