如何在ngDraggable angular js中停止click事件?

时间:2016-04-25 21:24:27

标签: javascript jquery angularjs

我有一些带有链接的可拖动面板。我想在拖动它时停止click事件。每次当我放下瓷砖时,它都会转到地址。我使用ngDraggable.js。我尝试使用e.preventDefault()和e.stopPropagation(),但没有运气。

angular.module('ExampleApp', ['ngDraggable']).
        controller('MainCtrl', function ($scope) {
            $scope.draggableObjects = [
                {name: 'one'},
                {name: 'two'},
                {name: 'three'}
            ];
            $scope.onDropComplete = function (index, obj, evt) {
                var otherObj = $scope.draggableObjects[index];
                var otherIndex = $scope.draggableObjects.indexOf(obj);
                $scope.draggableObjects[index] = obj;
                $scope.draggableObjects[otherIndex] = otherObj;
                evt.stopPropagation();
                evt.preventDefault();
            }
        });

HTML

<div class="row text-center" ng-controller="MainCtrl">
  <ul class="draglist">
    <li ng-repeat="obj in draggableObjects" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
        <div ng-drag="true" ng-drag-data="obj" ng-class="obj.name">
            {{obj.name}}
        </div>
    </li>
  </ul>
</div>

1 个答案:

答案 0 :(得分:1)

在onClick / ng-click中添加event.preventDefault和event.stopPropagation