JS角（角UI树）NG单击冲突VS拖动启动事件 [英] Angular JS (angular-ui-tree) ng-click conflict vs drag start event

问题描述

我目前使用角UI树库，我想实现以下行为：

当用户只需点击拖动节点上触发NG-点击功能，如果用户点击开始拖动NG-点击将被忽略，经常拖正开始下降。

我有以下HTML结构：

 ＆LT;格UI树=rootTreeNG控制器=控制器＆GT;
    ＆LT;格UI树节点=NG-模式=节点＆GT;
        ＆LT; D​​IV NG重复=节点中的节点UI树节点=NG点击=selectNode（节点）＆GT;
            ＆LT;格UI树手柄=＆GT;
            ...
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

目前的行为是拖欧米茄下降立即开始对鼠标按下并没有办法从尝试开始拖动区分点击

下面是库​​code触发节点的拖放正下降
<一href=\"https://github.com/JimLiu/angular-ui-tree/blob/master/source/directives/uiTreeNode.js\">uiTreeNode.js

  VAR bindDrag =功能（）{
   element.bind（'touchstart鼠标按下'功能（E）{
   如果（！范围。$ treeScope.multiSelect）{
      dragDelaying = TRUE;
      dragStarted = FALSE;
      dragTimer = $超时（函数（）{
         dragStartEvent（E）;
         dragDelaying = FALSE;
      }，范围$ treeScope.dragDelay）。
   }其他{
      toggleSelect（E）;
   }
   }）;
   element.bind（'touchend touchcancel的mouseup'，函数（）{
      $ timeout.cancel（dragTimer）;
   }）;
};
 

解决方案

我刚刚有同样的问题，我通过数据拖拽时延增加至100解决了这个问题，尝试：

UI树=rootTreeNG控制器=控制器数据拖拽时延=100

I am currently using angular-ui-tree library and I am trying to achieve following behavior:

When user just click on 'draggable node' it triggers ng-click function, if user click and start dragging ng-click is ignored and regular drag-n-drop starts.

I have following html structure:

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

Current behavior is that drag-n-drop starts immediately on 'mousedown' and there is no way to distinguish 'click' from attempt to start dragging

Here is the library code which triggers drag-n-drop of the node 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);
   });
};

解决方案

I just had the same issue and I solved it by increasing the data-drag-delay to 100, Try:

ui-tree="rootTree" ng-controller="Controller" data-drag-delay="100"

这篇关于JS角（角UI树）NG单击冲突VS拖动启动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！