CODEWITHSUNDEEP
javascriptangularjstreeviewangular-ui
zxz
zxz

Reputation: 21

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

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!

Upvotes: 2

Views: 5729

Answers (2)

user2851385
user2851385

Reputation: 1

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;	
    
  }
};

Upvotes: 0

marcelj
marcelj

Reputation: 597

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

Upvotes: 2

Related Questions