javascript - angularjs 可拖动指令

Question

我正在实现图像可拖动指令。我的代码在 http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3基本上它主要由一个基本的可移动指令组成

appModule.directive('movable', function ($document) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function postLink(scope, element, attrs) {
                var startX = 0,
                    startY = 0,
                    x = 0,
                    y = 0;

                element.css({
                    position: 'absolute'
                });

                function bindElementMove() {
                    element.bind('mousedown', function (event) {
                        // Prevent default dragging of selected content
                        console.log("binding element to move.");
                        startX = event.screenX - x;
                        startY = event.screenY - y;
                        $document.bind('mousemove', moveDiv);
                        $document.bind('mouseup', mouseup);
                    });
                }

                bindElementMove();

                function moveDiv(event) {
                    console.log('im moving');
                    y = event.screenY - startY;
                    x = event.screenX - startX;
                    element.css({
                        top: y + 'px',
                        left: x + 'px'
                    });
                    scope.$apply(function () {
                        scope.tb.x = element.css("top");
                        scope.tb.y = element.css("left");
                    });
                }

                function mouseup() {
                    console.log("mouse up fired - unbind moveDiv and mouseUp");
                    $document.unbind('mousemove', moveDiv);
                    $document.unbind('mouseup', mouseup);
                }
            }
        }
    });

还有一个图像指令

appModule.directive("imgelement", function ($document) {
    return {
        restrict: 'E',
        template: '<div movable resizable constrain deletable rotatable ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"><img ng-src="{{tb.blob_url}}"  ng-style="{height:tb.height, width:tb.width}"/></div>',
        require: 'ngModel',
        replace: true,
        link: function (scope, element, attrs) {
            hello = scope;
        }
    };
});

但是，正如在 plunkr 中看到的那样，当我第一次单击图像并尝试拖动时，它经历了几次 mousemove 事件，然后卡住，不再移动。随后释放我的鼠标移动图像，奇怪的是。知道我在这里做错了什么吗？

Answer 1

Angular.js 文档中有一个可拖动指令的工作示例 http://docs.angularjs.org/guide/directive

这是该指令中您的 Plunker 的一个分支:http://plnkr.co/edit/RmzmgubOfF1VdU7HaAtp?p=preview