拖动 Div 时禁用 ng-Click

Posted 2023-05-08

【中文标题】拖动 Div 时禁用 ng-Click

【英文标题】：Disable ng-Click while Dragging on Div

【发布时间】：2015-07-01 13:53:41

【问题描述】：

我已使用附加到可拖动指令的小部件启用展开和折叠。这工作正常。

问题：

在 ng-click 事件中添加了展开和折叠，因此当用户拖动小部件并将其放下时，ng-click 也会被触发。当用户拖动小部件时，我不希望 ng-click 被触发。

这是我的代码：

HTML：

<div plumb-item  ng-repeat="widget in dashboard.widgets" ng-style=" 'left':widget.left, 'top':widget.top, 'width':widget.width  " data-identifier="widget.id" resizeable>
    <p ng-if="widget.divider">widget.chartConfig.title.text</p>
    <md-card ng-if="!widget.expanded && !widget.divider" ng-click="widget.expanded = !widget.expanded" ng-mouseover="hover = true" ng-mouseout="hover = false">
        <md-item layout="row">                                
            <div class="collapsed-row" layout="row" layout-align="start center" flex> 
               <div class="md-toolbar-tools">
                   <h3>
                <span>widget.chartConfig.title.text</span>
               </h3>
               </div>                      
            </div>                                 
        </md-item>
    </md-card>
    <md-card ng-if="widget.expanded && !widget.divider" ng-click="widget.expanded = !widget.expanded">
        <div layout="column">                                
            <md-card-content>   
                 <highchart id="widget.id" config="widget.chartConfig"  ></highchart>                         
            </md-card-content>
        </div>
    </md-card>
</div>

JS：

Draggable.JS

routerApp.directive('draggable', function() 
  return 
        // A = attribute, E = Element, C = Class and M = html Comment
        restrict:'A',
        //The link function is responsible for registering DOM listeners as well as updating the DOM.
        link: function(scope, element, attrs) 
          console.log("Let draggable item snap back to previous position");
          element.draggable(
                // let it go back to its original position

                revert:true
              );
        
      ;
    );

【问题讨论】：

你可以添加event.stopPropagation()，当div拖动完成时。

在可拖动指令内？

是的，如果您有任何用于拖动完成功能的功能/回调

我试过了，没有任何区别

有一个可拖动的功能element.draggable( stop: function(event, ui) event.stopPropagation();你试过了吗？

【参考方案1】：

我做了一个指令 (alClick)，它只是 ng-click，但如果默认情况下按下持续时间长于 750 毫秒，则会取消任何点击。因此，拖动或滑动时不会触发 click 或 tap 事件。

<div al-click="widget.expanded = !widget.expanded"></div>

【讨论】：

我喜欢 alClick，直到我发现我之前忽略的警告 This directive removes/disables angular's ng-click. You will not be able to use al-click along with ng-click. 删除 ng-click 功能对于我的应用程序（以及大多数应用程序，我猜）是不可接受的。我希望alClick的作者（@Mohammed A. Al Jama）可以修改它，使其可以与ng-click共存！我相信有办法，它会让他的软件产品变得更好。

【参考方案2】：

尝试在你的指令中添加这个

routerApp.directive('draggable', function() 
  return 
        // A = attribute, E = Element, C = Class and M = HTML Comment
        restrict:'A',
        //The link function is responsible for registering DOM listeners as well as updating the DOM.
        link: function(scope, element, attrs) 

          console.log("Let draggable item snap back to previous position");
          element.draggable(

                 stop:function(event,ui) 
                          console.log("Check if its printing")
                          event.stopPropagation();
                                ,

                            // let it go back to its original position

                revert:true
              );
            
         ;
     );

这会阻止事件的进一步传播，因此它可能会阻止不需要的点击

【讨论】：

能否提供完整的代码部分，包括我的指令？

我已经添加了指令代码，看看对你有没有帮助

警告：这似乎需要包含 jQueryUI 的“可拖动”功能，但问题或答案中并未列出 jQuery。将有助于增加此要求的答案。