6
[AngularJS] Draggable (Movable) Element
source link: http://siongui.github.io/2013/04/04/angularjs-draggable-movable-element/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
[AngularJS] Draggable (Movable) Element
Updated: February 20, 2015
The following code demonstrates how to make a dom element draggable in AngularJS way:
movable.html | repository | view raw
<!doctype html> <html ng-app="draggableModule"> <head> <meta charset="utf-8"> <title>AngularJS Draggable (Movable, Drag and Drop) DOM Element Example</title> </head> <body> <div draggable style="width: 200px; height: 200px; background: yellow;">Drag Me</div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script> <script src="ngdraggable.js"></script> </script> </body> </html>
ngdraggable.js | repository | view raw
'use strict';
angular.module('draggableModule', []).
directive('draggable', ['$document' , function($document) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
var startX, startY, initialMouseX, initialMouseY;
elm.css({position: 'absolute'});
elm.bind('mousedown', function($event) {
startX = elm.prop('offsetLeft');
startY = elm.prop('offsetTop');
initialMouseX = $event.clientX;
initialMouseY = $event.clientY;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
return false;
});
function mousemove($event) {
var dx = $event.clientX - initialMouseX;
var dy = $event.clientY - initialMouseY;
elm.css({
top: startY + dy + 'px',
left: startX + dx + 'px'
});
return false;
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
};
}]);
If you prefer to do this in pure JavaScript way, see reference [3].
References:
[1]my gist
[2]Another implementation of draggable element in AngularJS documentation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK