我正在实现一个图像可拖动指令.我的代码位于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: '', require: 'ngModel', replace: true, link: function (scope, element, attrs) { hello = scope; } }; });
然而,正如在plunkr中所见,当我第一次点击图像并尝试拖动时,它会经历几次mousemove
事件的传递,然后冻结,不再移动.随后释放我的鼠标移动图像,奇怪的是.知道我在这里做错了什么?
Angular.js文档中有一个draggable指令的工作示例http://docs.angularjs.org/guide/directive
这是该指令中Plunker的一个分支:http://plnkr.co/edit/RmzmgubOfF1VdU7HaAtp?p = preview
我必须在这里回答我自己的问题.我应该使用event.preventDefault
的mousemove
功能,以防止使用默认的图像拖动浏览器,并在此拖放功能.