标签: angular-ui-tree

我目前正在使用angular-ui-tree库,我正在尝试实现以下行为:

当用户只需单击"可拖动节点"时,它会触发ng-click功能,如果用户单击并开始拖动,则忽略ng-click并开始常规拖放操作.

我有以下html结构:

<div ui-tree="rootTree" ng-controller="Controller">
    <div ui-tree-nodes="" ng-model="nodes">
        <div ng-repeat="node in nodes" ui-tree-node="" ng-click="selectNode(node)" >
            <div ui-tree-handle="">
            ...
            </div>
        </div>
    </div>
</div>

目前的行为是'mousedown'上的drag-n-drop立即开始,并且没有办法区分'click'和尝试开始拖动

这是触发节点uiTreeNode.js拖放的库代码

var bindDrag = function() {
   element.bind('touchstart mousedown', function (e) {
   if (!scope.$treeScope.multiSelect) {
      dragDelaying = true;
      dragStarted = false;
      dragTimer = $timeout(function() {
         dragStartEvent(e);
         dragDelaying = false;
      },    scope.$treeScope.dragDelay);
   } else {
      toggleSelect(e);
   }
   });
   element.bind('touchend touchcancel mouseup', function() {
      $timeout.cancel(dragTimer);
   });
};

我正在使用:https://github.com/angular-ui-tree/angular-ui-tree

我想接受:

1. ui-tree的根范围的类别
2. 应用程序到相同类别的应用程序.

我的控制器是(部分):

//Accept Categories at root scope and accept apps only inside same category

$scope.options = {

    accept: function(sourceNodeScope, destNodesScope, destIndex) {
        //todo check nodes and return
        alert('called');
        $log.debug("sourceNodeScope");
        $log.debug(sourceNodeScope);
        $log.debug("destNodesScope");
        $log.debug(destNodesScope);
        return false;
    },
    dropped: function(event) {

    },
    beforeDrop: function(event) {

    }

};

我的HTML是:

    <div ng-controller="CpoTreeViewCtrl">

    <div>

<script type="text/ng-template" id="apps_renderer.html">
  <div ui-tree-handle>
    {{app.name}}
  </div>
</script>

<script type="text/ng-template" id="category_renderer.html">
  <div ui-tree-handle >
    {{category.name}}
  </div>
  <ol ui-tree-nodes ng-model="category.apps">
    <li ng-repeat="app in category.apps" ui-tree-node ng-include="'apps_renderer.html'">
    </li> …

我正在使用angular-ui-tree在我的应用程序中构建项目树.我正在使用它的拖放功能,我需要知道丢弃发生的时间和地点(在哪个元素上).

例如,我拖动item1,然后将其放在面板上.我希望面板显示项目名称.(每个项目都有一个名称属性).面板只是一个带文本的简单div.

我在文档中看到我可以访问控制器中的"丢弃"事件.但我不明白如何根据拖放项目更改面板内容.

在angular-ui-tree中,我正在寻找一种在可拖动节点内部建立链接的方法.

现在发生的事情是当我点击节点内的链接时,它开始"抓住"整个节点来拖动它.

我看到了这个答案Angular JS(angular-ui-tree)ng-click冲突vs拖动开始事件,但它与我想要做的并不相似.在这个答案ng-click绑定到节点,在我的情况下,我在节点内有多个链接.

下面是我的html:

    <div ui-tree="treeOptions" drag-delay="1000" id="tree-root">
      <ol ui-tree-nodes ng-model="filteredModules" data-nodrop>
        <li ng-repeat="module in filteredModules" ui-tree-node>
          <div ui-tree-handle ng-click="toggle(this)">
            <a class="btn btn-xs"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
                {{module.name}}
          </div>
          <ol ui-tree-nodes ng-model="module.stages" data-nodrop ng-class="{hidden: collapsed}">
            <li ng-repeat="stage in module.stages" ui-tree-node>
              <div ui-tree-handle ng-click="toggle(this)">
                <a class="btn btn-xs"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
                    {{stage.name}}
              </div>
              <div ui-tree-nodes ng-model="stage.cases" ng-class="{hidden: collapsed}">
                  <div ng-repeat="case in stage.cases" ui-tree-node>
                  <div ui-tree-handle>

                    <!-- HERE I HAVE TWO LINKS --> …

在我的应用程序中,我使用了角度ui-tree.

现在添加我在代码下面使用的新节点

 <button class="btn btn-info btn-circle btn-sm" type="button" ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})' style="margin-top:15px" data-nodrag><i class="fa fa-plus"></i></button>

 <script type="text/ng-template" id="nodes_renderer.html">
                            <div ui-tree-handle class="tree-node tree-node-content">

                                <div style="width:100%">
                                    <div style="width:87%;display: inline-block">
                                        <a class="" style="color:#c1c1c1" data-nodrag ng-click="toggle(this)"><span class="fa" ng-class="{'fa-plus': collapsed, 'fa-minus': !collapsed}"></span>
                                            <span class="label label-info"><i class="fa fa-tasks"></i></span> </a>
                                            <span style="width:80%;word-wrap: break-word" class="remove-editable-click cursor-pointer" editable-text="node.task" buttons="no" e-ng-model="WBSData.task" e-ng-blur="changeFieldEdit(this)" e-required data-nodrag e-style="border:1px solid #DDDDDD;width:90px">
                                               {{node.task}}
                                            </span>
                                    </div>
                                    <div style="width:10%;display: inline-block">
                                        <input icheck type="checkbox" ng-model="node.WBSDataSelectedTask" checklist-value="node.task" style="float:right" value="none">
                                    </div>

                                </div>
                            </div>
                            <ol ui-tree-nodes="" ng-model="node.subtasks" ng-class="{hidden: collapsed}">
                                <li …