angular-ui-tree / angular-ui-tree Goto Github PK

I'm wondering on what the best approach to creating a delete node / add child button would be? It seems if I had an ng-click directive, the scope calling the function changes depending on the nesting level. I really need the ability to add a child node to each item or delete a whole section. Any tips?

Hi,

May be I'm missing something but when I try to use this directive on a unordered list, I always get:

TypeError: Object # has no method 'initSubItemElement'

Hi,

There is issue in this module.When i tries to drop any node one level down, it goes down by 2 level.

Ex: In your example sample3, when i selected node "item 2.1.1" and try to drop it on "item 2.1.2", but it goes to "item 2.1.3".

For more explaination, Please contact me at my mail [email protected]

Please resolve it.

I am trying to use callbacks but none - except 'clicked' is ever called. I'm on 1.3.5.

If you are using it and like it, please Give us a like on ngmodules

Thanks

I tried to put inside level 2 in example 1 but it cannot add it..
It failed after dropping..because I have recursive unlimited nested..

What is the current flow to update the gh-pages branch with the latest updates?

Hi,
I added your nested sortable to my project as your docs instructed and it work well if try to replicate demo Sample 1. However, when I try to get the recursive (sample 3) version to work in my project I get this error.

[Error] Error: [$compile:ctreq] Controller 'uiNestedSortable', required by directive 'uiNestedSortableItem', can't be found!

Again, it works fine as long as I don't use the recursive method. I used the exact same HTML, CSS, etc. and even copy and pasted the list object.

The full error log.

[Error] Error: [$compile:ctreq] Controller 'uiNestedSortable', required by directive 'uiNestedSortableItem', can't be found!
getControllers@http://localhost:8000/app/lib/angular/angular.js:4948:132
nodeLinkFn@http://localhost:8000/app/lib/angular/angular.js:5089:49
compositeLinkFn@http://localhost:8000/app/lib/angular/angular.js:4607:25
publicLinkFn@http://localhost:8000/app/lib/angular/angular.js:4516:45
http://localhost:8000/app/lib/angular/angular.js:15949:71
http://localhost:8000/app/lib/angular/angular.js:6277:13
wrappedCallback@http://localhost:8000/app/lib/angular/angular.js:9042:59
wrappedCallback@http://localhost:8000/app/lib/angular/angular.js:9042:59
http://localhost:8000/app/lib/angular/angular.js:9128:34
$eval@http://localhost:8000/app/lib/angular/angular.js:9953:28
$digest@http://localhost:8000/app/lib/angular/angular.js:9809:28
$apply@http://localhost:8000/app/lib/angular/angular.js:10039:31
done@http://localhost:8000/app/lib/angular/angular.js:6542:51
completeRequest@http://localhost:8000/app/lib/angular/angular.js:6726:15
onreadystatechange@http://localhost:8000/app/lib/angular/angular.js:6681:26 <li ng-repeat="item in list" ui-nested-sortable-item="" ng-include="'items_renderer.html'" class="ng-scope">
    (anonymous function) (angular.js, line 7818)

Can't seem to figure out how I can create a multi level sortable list that would look something like this:

    - parent
        - child
        - child
        - child
            - Sub Parent
                - child
                - child
        - child
        - child
        - child
            - Sub Parent
                - child
                - child
                - child
                - child
                - child
                - child

This fix is pretty simple. I've just added:

          dragElm.css('z-index', 9999);

$scope.$index returns the index after Angular filters are applied. If I apply a filter to a sortable list, the right item appears to drag but the wrong item appears on drag end.

Hello,

I really like your module, and I've start using it in our's company project.

How about making this module more bower friendly - add bower.json and following semver strictly?

If you like this ideas I can prepare PR

In the recursive demo if you try to move item 1 to just before item 3 (same level) it will be misplaced to after item 3/before item 4 (same level).

In several places in many files, including README.md project is referred as Angular-NestedSortable

I noticed it because

At first I thought it's a mistake, especially when it comes to the demo link and I started preparing a pull request to fix it, but then I noticed it could be purpose since some recent commits still use the old name.

@JimLiu could you please provide some more information?
For now I'm sending only demo link fix as a pull request

Does this module supports a grid mode like the jQuery plugin?
https://jqueryui.com/sortable/#display-grid

Hi, I was wondering how I would be able to enforce a dynamic max level restriction based on an variable.

I've been modifying the dragMoveEvent, but it's not working.

Thanks

I have created a Travis configuration file to run the tests. More details at 4dc6d88.
It would be nice if this repository could be added to Travis.

More information: Travis CI

Hey, i just updated to the latest version and childAccept is not accessible anymore when using the options. I also don't see a callback function defined like for the others e.g

callbacks.accept = function(modelData, sourceItemScope, targetScope)
etc.

Sorry for not being able to provide a patch...

I have a draggable tree inside a modal. When the tree is longer than the fixed height of the modal, it creates a scrollbar inside de modal body div, as expected.

The problem is that when I try to drag some item beyond the modal div area, it does not trigger the scroll inside the modal body. Instead, it triggers the scroll of the whole page body.

Currently the demo is located at the gh-pages branch. I have styled the demo pages and added an overview page.

What do you think to use the demo directory to the gh-pages branch?
We can later on extend this overview page with links to eg. the documentation.

Hi
That's nor really an issue, more of an advice I would like to receive or a wish.
I love this feature, it's awesome. I wished I found this earlier :)
I want to be able to collapse the nested nodes when I click on the parent (or an icon on the parent line). That way, we can achieve a sortable tree. Of course, I also would like to be able to add icons on the parent line to create children dynamically
I have tried to mix it with angular UI Bootstrap accordion and it did not work.
I also tried a basic ng-click= "hide=!hide" on an icon of the parent and ng-hide="hide" on the children, but this doesn't work either.

Is there any hint about how to customize the parent line so that it can accept icons and all ? Or any attempt to use Nested Sortable with accordion ? This would become the best angular sortable module on earth!

Thanks again for the great work, I'm deeply impressed
Jack
I could make it work; it was a css issue (display:block prevents from adding any icon to the same line as the parent so I changed it). Still, would be very interested if anyone had applied this module to make a sortable tree, with expand feature and the possibility to create/delete nodes.

I'm installing your package using bower install angular-nested-sortable, but it installs the dev-packages instead of the dist-packages.

This means angular-nested-sortable.js is not available for use.

I would like to you use the accept method to "lock" items to it's parent item only. Is it possible to get the parent data information or some other way to achieve this? Thanks a lot!

As far as I can see the index of the destination target is not available in the accept callback.

I've got a use case where the last item in any sortable is an item to add another item. Therefore it shouldn't be possible to drag anything below the last item of a nested sortable element.

For as far as I can see this can't be detected in the accept callback, though. Would it be possible to add destIndex as one of the arguments of the accept callback?

Thanks for sharing this great module.

I was running through the demos and could notice that you can't add sub items to the items that start with no items (items: []).

When you have e.g. a item with 2 sub items, making the parent item a sub item of another item makes its sub items get hidden, i.e. no levels greater than the second get displayed.

Is there a way to access the bound element from a list item?

This is an awesome project. But we can't get it to work with ng-include templates.

Like:

Awesome component, thank you very much!

When using connected lists (e.g. http://jimliu.github.io/Angular-NestedSortable/sample4.html), it appears we lose the ability to drag to a list once it is emptied out, presumably because the target [] no longer has any size.

Maybe it would be good to add a default target for empty lists, like a container div that could act as the target instead?

In demo Sample1, if you move it Item3 up one level such that it becomes a daughter of Item2, then all of Item3.3x disappear.

Hi this is more like a question,

I'm spending hours now figuring out how to create a collapse-all / expand-all method but with no success. Can you guys give atleast a hint on how can this be done? Thanks!

The main field in bower.json states that the main file of the distribution should be angular-nestedSortable.js. However there is not such a file.

Maybe you can simply change Line 9 to "main": "demo/dist/angular-nested-sortable.js", .

Please fix it. Thank you.

When i call .unshift(itemObj), I get an error when trying to move the object. At nestedSortableItemCtrl.js:31 saying "Cannot read property '0' of undefined".

$scope.itemData = function() {
31: return $scope.sortableModelValue[$scope.$index];
};

Drag and drop on ipad wont work well.

Custom HTML element attributes should be prefixed with data-*.
However, when doing this for the nodrag attribute, it doesn't work anymore.

So nodrag works, but is invalid. data-nodrag doesn't work, but is valid.
Both should be possible.

Reference to the source: https://github.com/JimLiu/Angular-NestedSortable/blob/master/source/uiNestedSortableHandle.js#L42

Use Case
The nested sortable requires different layouts between parent and child sortables. For example, the parent may be list (as in your example) and the child may be a gallery (inline or inline-block)

Issue:
There does not seem to be a way to separate the CSS for child and parent layouts.

If you have a list such as

+ Item 1
| + Item 1.1
| + Item 1.2
+ Item 2

and try to move item 2 up a level such that the list will be

+ Item 1
| + Item 1.1
| + Item 1.2
| + Item 2

Item 2 will erroneously be added to the from of the new list and not the end such that you end up with

+ Item 1
| + Item 2
| + Item 1.1
| + Item 1.2

This is easily demonstrated in demo sample3

Uncaught TypeError: Cannot read property '0' of undefined - On line 220.

I can't pinpoint why i'm getting this.

It would be good to state what browsers are supported by the module.

Hi, I love your directive.
I'm using it for a webapp i'm developing.
I like the "accept" idea.
I found useful to add the targetScope, in order to do some action when the target is discovered.

accept: function (data, targetScope) {
           targetScope.doStuff() // ex. BLINK

            return data.type != "root-folder"
        }

I did a similar thing in actionscript once, and i remember i used the visitor pattern to solve the problem.
Hope this could be an idea to improve this amazing directive

I am able to drag sub level node to root level, but can't seem to add root node since root doesn't have itemData.

Hey could you update the version number, so I am able to pull the most up to date version?

thanks!

Viewing the demo at: http://jimliu.github.io/Angular-NestedSortable/

When I drag elements you can't seem to drop them into a different position - other elements aren't moving to clear space. Seems like it could be a CSS positioning issue.

Only seems to be happening in <IE10.

Thanks

Steps to reproduce:

• open http://jimliu.github.io/Angular-NestedSortable/demo/sample3.html
• try to drag item3.3.3 to item3 as last element

This issue affects all tree nodes – it's not possible to choose depth easily (good example - http://mjsarfatti.com/sandbox/nestedSortable/ )

Can you make it work on mobile devices? When I tried it on my mobile device, it didn't work as expected. The drag is initiated (you can see the placeholder), but the draggable object will not move.

I reproduced the same error on your examples by emulating a mobile device (using Google Chrome). I suppose it has to do with the "mousemove" event that is not executed, but I'm not sure.

If I am using itemClicked property in options, handler is not wrapped in $apply, that can lead to confusion for developers.

Hey guys!
Thanks for building this awesome library, integrating drag and drop in my application felt like a walk in the park :)
Anyways, I was wondering about your opinion of HTML5's built-in drag and drop mechanisms. Are there any technical reasons not to use it? How long would it take implement a version of Angular-NestedSortable that is using HTML5, or would it have to be a complete new project from scratch?
I would be really happy to get some insights from you!

(I hate to open another Issue, especially as this is a bit of an edge case, but I think this is a great module and really hope it gets even better.)

I've been using Angular with Firebase. Firebase essentially takes Angular 2-way data binding and extends it to 3-way binding (includes the database). However, in the firebase database, whenever an array becomes empty, the array and it's key are automatically removed from the db.

So for example, taking the data object from the demo...

var list = [
        {
          "id": 1,
          "title": "item1",
          "items": [],
        }, ...

If this model data were bound to the firebase db, "items":[] would be removed from object.

This isn't really an "issue" with firebase. It's just how they do things.
http://stackoverflow.com/questions/15408416/how-to-handle-empty-arrays-in-firebase

This breaks nestedSortable. If you try to drop an item on an item that doesn't have any children this error with fire off.

[Error] TypeError: 'undefined' is not an object (evaluating '$scope.sortableModelValue.splice')
    insertSortableItem (angular-nestedSortable.js, line 108)

This is because in the function $scope.insertSortableItem() will be evaluated to be undefined.

At the moment the README doesn't mention anything about the available callbacks.

We should document all callbacks that are available, so users know these are available and don't have to search them in the source code. This can be done either in the README or at the demo page.

As the project grows it can be useful to have extended documentation available.

I have found the following callbacks in the source code:

• accept = function(modelData, sourceItemScope, targetScope) {};
• orderChanged = function(scope, sourceItem, sourceIndex, destIndex) {};
• itemRemoved = function(scope, sourceItem, sourceIndex) {};
• itemAdded = function(scope, sourceItem, destIndex) {};
• itemMoved = function(sourceScope, sourceItem, sourceIndex, destScope, destIndex) {};

Can angular nested sortable generate like

'0' ...
        'item_id' ...
        'parent_id' => "none"
        'depth' => "0"
        'left' => "1"
        'right' => "22"
    '1' ...
        'item_id' => "1"
        'parent_id' ...
        'depth' => "1"
        'left' => "2"
        'right' => "7"
    '2' ...
        'item_id' => "2"
        'parent_id' => "1"
        'depth' => "2"
        'left' => "3"
        'right' => "6"
    '3' ...
        'item_id' => "3"
        'parent_id' => "2"
        'depth' => "3"
        'left' => "4"
        'right' => "5"
    '4' ...
        'item_id' => "4"
        'parent_id' ...
        'depth' => "1"
        'left' => "8"
        'right' => "9"
    '5' ...
        'item_id' => "5"
        'parent_id' ...
        'depth' => "1"
        'left' => "10"
        'right' => "17"
    '6' ...
        'item_id' => "6"
        'parent_id' => "5"
        'depth' => "2"
        'left' => "11"
        'right' => "12"
    '7' ...
        'item_id' => "7"
        'parent_id' => "5"
        'depth' => "2"
        'left' => "13"
        'right' => "16"
    '8' ...
        'item_id' => "8"
        'parent_id' => "7"
        'depth' => "3"
        'left' => "14"
        'right' => "15"
    '9' ...
        'item_id' => "9"
        'parent_id' ...
        'depth' => "1"
        'left' => "18"
        'right' => "19"
    '10' ...
        'item_id' => "10"
        'parent_id' ...
        'depth' => "1"
        'left' => "20"
        'right' => "21"

So I can loop though them in a foreach loop? Right now I'm using a jQuery version but I'm using angularjs more so I wondered if it can do this. Example: http://mjsarfatti.com/sandbox/nestedSortable/