angularjs draggable指令

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文档中有一个draggable指令的工作示例http://docs.angularjs.org/guide/directive

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

Answer 2

我必须在这里回答我自己的问题.我应该使用event.preventDefault的mousemove功能,以防止使用默认的图像拖动浏览器,并在此拖放功能.