angularjs ziehbar Richtlinie

Ich bin Umsetzung einer image ziehbar Richtlinie. Mein code ist an http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3 im Grunde ist es in Erster Linie aus einer Basis mit beweglichen Richtlinie

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

Sowie ein Bild der Richtlinie

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

Jedoch, wie gesehen, in plunkr, wenn ich zuerst klicken Sie auf das Bild und versuchen, Sie zu ziehen, geht es über mehrere Pässe der mousemove Ereignis, und dann friert, bewegt sich nicht mehr. Anschließend die Freigabe meiner Maus bewegt das Bild, komischerweise. Keine Ahnung, was mache ich hier falsch??

InformationsquelleAutor goh | 2013-12-05