angularjs déplaçable directive

Je me suis mise en œuvre d'une image déplaçable directive. Mon code est à http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3, Fondamentalement, de son principalement composé d'une base mobile directive

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

Et une image directive

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

Cependant, comme on le voit dans plunkr, quand j'ai cliquer sur l'image et essayer de glisser, il passe par plusieurs passages de la mousemove événement, puis se fige, de ne plus bouger. Par la suite la libération de mes souris permet de déplacer l'image, étrangement. Toute idée de ce que je fais de mal??