Drag and Drop child node to parent node using angular.treeview and angular ui-sortable

Question

Hi Im new to angularjs and im using this treeview directive angular.treeview matched with Angular-ui ui-sortable directive

So i modified angular.treeview.js and added ui-sortable tag to <ul> tag to make it work:

//tree template
            var template =
                '<ul ui-sortable>' +
                    '<li data-ng-repeat="node in ' + treeModel + '">' +
                        '<i class="collapsed" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
                        '<i class="expanded" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
                        '<i class="normal" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
                        '<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
                        '<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
                    '</li>' +
                '</ul>';

Sample fiddle: http://jsfiddle.net/zg3f9/1/

The problem is that i want the child nodes to be draggable to their parent or other nodes. can you guys help me with this? thanks!

marcelj · Accepted Answer · 2014-04-11 00:19:18Z

2

Why not use a library that already supports this? Like angular-ui-tree, or, if you want to use the HTML5 Drag & Drop API, angular-drag-and-drop-lists

answered Apr 11, 2014 at 0:19

marcelj

5975 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2851385 · Accepted Answer · 2017-02-02 02:30:20Z

0

My Example: http://codepen.io/Yizhu/pen/EPLxEW

scope.sortableOptions = {
  connectWith: ".apps-container",
  update: function(event, ui) {			
    var index = ui.item.sortable.index;
    var dropindex = ui.item.sortable.dropindex;
    var dropTargetModel = ui.item.sortable.droptargetModel;
    var dragModel = ui.item.sortable.model;	
    
  }
};

answered Feb 2, 2017 at 2:30

user2851385

11 bronze badge

1 Comment

Stephen Rauch Over a year ago

Welcome to Stack Overflow! When giving an answer it is preferable to give some explanation as to WHY your answer is the one.

Collectives™ on Stack Overflow

Drag and Drop child node to parent node using angular.treeview and angular ui-sortable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related