CODEWITHSUNDEEP
javascriptangularjshtmldraggable
Sajeetharan
Sajeetharan

Reputation: 222572

Disable ng-Click while Dragging on Div

I have enabled expand and collapse with my widget which has attached to a draggable directive.This works fine.

ISSUE:

The expand and collapse has been added in ng-click event, so when the user drags the widget and drop it ng-click also gets fired. I dont want ng-click getting fired when the user drags the widget.

Here is my code:

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
              });
        }
      };
    });

Upvotes: 2

Views: 1936

Answers (2)

Mohammed A. Al Jama
Mohammed A. Al Jama

Reputation: 511

I made a directive (alClick) which is merely ng-click but cancels any click if the press duration is longer than 750ms by default. Therefore, no click or tap event will fire when dragging or swiping.

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

Upvotes: 1

Anita
Anita

Reputation: 2400

Try adding this in you directive 

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
              });
            }
         };
     });

This stops the further propagation of events,so it may stop the undesired click

Upvotes: 0

Related Questions