angular js中的自定义draggable指令抛出Range错误

Custom draggable directive in angular js throws Range error

本文关键字:Range 错误 指令 draggable js 自定义 angular      更新时间:2023-09-26

我试图在angularjs中实现自定义draggable指令,但它失败了
距离误差。这段代码有什么问题

(function (window, angular, undefined) {
    var app = angular.module('ngDraggableModule', []);
    app.directive('easyDrag', ['$document', function ($document) {
        return {
            restrict: 'EA',
            scope: {
                params: '=',
                elemId: '='
            },
            link: function (scope, elem, attrs) {
                var isMouseDown = false,
                    startDrag = false,
                    position = {},
                    x = 0,
                    y = 0,
                    startX = 0,
                    startY = 0,
                    changedPos = 0;
                elem.bind('mousedown', onMouseDown);
                function onMouseDown(e) {
                    if (angular.isDefined(scope.params.disabled) && scope.params.disabled === true) {
                        return false;
                    }
                    isMouseDown = true;
                    startX = e.screenX - x;
                    startY = e.screenY - y;
                    $document.bind('mousemove', onMouseMove);
                    $document.bind('mouseup', onMouseUp);
                }
                function onMouseMove(e) {
                    if (isMouseDown) {
                        if (!startDrag) {
                            startDrag = true;
                            if (angular.isFunction(scope.params.start)) {
                                scope.params.start(changedPos, e, scope.elemId);
                            }
                        }
                        y = e.screenY - startY;
                        x = e.screenX - startX;
                        position = {};
                        if (angular.isDefined(scope.params.axis)) {
                            if (scope.params.axis.toLowerCase() == 'x') {
                                position.marginLeft = x + 'px';
                            }
                            else if (scope.params.axis.toLowerCase() == 'y') {
                                position.marginTop = y + 'px';
                            }
                        } else {
                            position.marginTop = y + 'px';
                            position.marginLeft = x + 'px';
                        }
                        changedPos = position;
                        elem.css(position);
                        if (angular.isFunction(scope.params.drag)) {
                            scope.params.drag(e, changedPos, scope.elemId);
                        }
                    }
                }
                function onMouseUp(e) {
                    if (!isMouseDown) {
                        return false;
                    }
                    isMouseDown = false;
                    startDrag = false;
                    if (angular.isFunction(scope.params.stop)) {
                        scope.params.stop(changedPos, e, scope.elemId);
                    }
                }
            }
        }
    }]);
})(window, window.angular, undefined);
var app = angular.module('DemoApp',['ngDraggableModule']);
app.controller('MainCtrl',['$scope',function($scope){
  $scope.assetDragParams = {
    drag : function(e,pos,id){
      console.log(id); // here is the error
    }
  }
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MainCtrl">
 <div easy-drag params="assetDragParams" elem-id="col._id">
    drag it
 </div>
</div>

调用指令,这样会导致RangeError:超过最大调用堆栈大小怎么了?

您需要在mousedown之外绑定mousemove + mouseup,无论如何您在onMouseDown函数中设置isMouseDown = true。所有的函数绑定应该是这样的:

elem.bind('mousedown', onMouseDown);
$document.bind('mousemove', onMouseMove);
$document.bind('mouseup', onMouseUp);

onMouseDown函数应为:

function onMouseDown(e) {
    if (angular.isDefined(scope.params.disabled) && scope.params.disabled === true) {
        return false;
    }
    isMouseDown = true;
    startX = e.screenX - x;
    startY = e.screenY - y;
}