Prevent dragging in Angular UI Tree

Question

is there any possibility to prevent user's dragging of Angular UI Tree nodes? There is an option "nodrop" and it works, but I would like to prevent dragging too.

   <div ui-tree id="tree-root" data-drop-enabled="false">
     <ol ui-tree-nodes ng-model="org.data">
      <li ng-repeat="node in org.data" ui-tree-node ng-include="'mnuRenderer.html'"></li>
     </ol>
   </div>

score 3 · Answer 1 · answered Feb 18 '17 at 14:45

You can use the data-drag-enabled directive which is true by default. For more details have a look in the documentation: https://github.com/angular-ui-tree/angular-ui-tree#data-drag-enabled

   <div ui-tree id="tree-root" data-drop-enabled="false" data-drag-enabled="false" >
     <ol ui-tree-nodes ng-model="org.data">
      <li ng-repeat="node in org.data" ui-tree-node ng-include="'mnuRenderer.html'"></li>
     </ol>
   </div>

Movsar Bekaev · Accepted Answer · 2017-01-14T14:59:20.190

It turns out it can be disabled but only from the inside of its .js file

angular-ui-tree.js

... 
angular.module('ui.tree')

    .controller('TreeController', ['$scope', '$element',
      function ($scope, $element) {
        this.scope = $scope;

        $scope.$element = $element;
        $scope.$nodesScope = null; // root nodes
        $scope.$type = 'uiTree';
        $scope.$emptyElm = null;
        $scope.$callbacks = null;

        $scope.dragEnabled = false;
        $scope.emptyPlaceholderEnabled = true;
        $scope.maxDepth = 0;
        $scope.dragDelay = 0;
        $scope.cloneEnabled = false;
        $scope.nodropEnabled = false;
...

Here is the option: $scope.dragEnabled

UPD I have found out that there is a switch for that option alongside with data-nodrop - data-nodrag, however it does not work.

Prevent dragging in Angular UI Tree

2 Answers2