Making in-page elements or containers give more flexibility to the user so that he can move or drag stuff as per requirement.
In jQuery UI we are pretty much aware of a Draggable function which makes thing a lot easier. jQuery is still loved due to its plug play and enjoyable way of work. Today is the era of AngularJS, now nobody talks about jQuery they simply jump in MV* frameworks and only AngularJS comes to the rescue.
In this post, I will show how you can make any element on page Draggable without using any module. Will simply add a Directive which will do our stuff easily.
Let’s Begin the Show …
In HTML part you need to include AngularJS and Elements which you want to make Draggable.
<!doctype html>
<html ng-app="draggableModule">
<head>
<meta charset="utf-8">
<title>How to Make Element Draggable in AngularJS Without Using any Module.</title>
</head>
<body>
<div draggable style="cursor:move;"><img src="http://freakyjolly.com/wp-content/uploads/2017/03/Screenshot_15.png" atl="Freaky Jolly Draggable Example"></div>
<script src="angular.min.js"></script>
<script src="ngDraggable.js"></script>
</script>
</body>
</html>
Next, you need to add following Directive to which will bind Mouseup and Mousedown events on an element on which you have already added directive "Draggable".
'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);
}
}
};
}]);It's time to check your output where you should have that element draggable using cursor.
See you
Leave a Reply