Как ограничить возможность перетаскивания только элементами уровня одного уровня в angular-ui-tree? - PullRequest
Новая
       22

Как ограничить возможность перетаскивания только элементами уровня одного уровня в angular-ui-tree?

0 голосов
/ 09 октября 2018

Я разрабатываю древовидное представление для отображения списка категорий, используя AngularJS.Я использовал этот репозиторий git.

HTML 

<div ui-tree="treeOptions" id="tree-root" data-drag-enabled="true">
    <ol ui-tree-nodes ng-model="nodes">
        <li ng-repeat="node in nodes"  
            ui-tree-node 
            data-type="top-level" 
            ng-include="'nodes_renderer.html'"></li>
    </ol>
</div>

Я могу реализовать перетаскивание элементов в дереве.Я хочу ограничить возможность перетаскивания только элементами уровня одного уровня.

Я попробовал ниже, но все еще не повезло.

JS 

$scope.treeOptions = {

    accept: function (sourceNodeScope, destNodesScope, destIndex) {

        if (sourceNodeScope.$parent.$id === destNodesScope.$parent.$id)
            return true;
        else
            return false;

    }
}

Я не могу найти много об этом требовании в репозитории GitHub.Любая помощь или полезная ссылка высоко ценится.

1 Ответ

0 голосов
/ 10 октября 2018

Ваша логика в основном в порядке, но обратный вызов, который вы используете, неправильный.Angular-ui-tree имеет обратный вызов beforeDrop, который позволяет вам вернуть обещание и на основании результата примет или отклонит отбрасывание.Обратный вызов accept фактически вызывается, когда вы перетаскиваете каждый раз, когда пересекаете другой узел.Вот простой пример реализации: 

$scope.treeOptions = {
        beforeDrop : function (e) {
          if (e.source.nodesScope.$parent.$id === e.dest.nodesScope.$parent.$id) {
            console.log("siblings, this is allowed");
            return $q.resolve();
          }
          else {
            console.log("not siblings");
            window.alert("Not siblings! Reject this drop!");
            return $q.reject();
          }
        }
     };

Вот plunkr, показывающий простой пример: http://plnkr.co/edit/6PD6PrD3wRduOjOQzuFN

...