Javascript angularjs可拖动指令

我正在执行一个图像可拖动指令。我的代码基本上是由一个基本指令组成的

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

和一个图像指令

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

appModule.directive（“imgelement”），函数（$document）{
返回{
限制：'E'，
模板：“”，
要求：'ngModel'，
替换：正确，
链接：函数（范围、元素、属性）{
hello=范围；
}
};
});

---

但是，正如在plunkr中所看到的，当我第一次单击图像并尝试拖动时，它经历了几次

mousemove

事件，然后冻结，不再移动。随后释放我的鼠标移动图像，很奇怪。知道我做错了什么吗

Angular.js文档中有一个draggable指令的工作示例

---

这是指令中的一个分支：

我必须在这里回答我自己的问题。我应该在

mousemove

功能中使用

event.preventDefault

，以防止浏览器在此处使用默认的图像拖放功能

我有一段时间有这个问题，不知道为什么，谢谢！