Make Element Draggable in AngularJS Without Using any Module

Application Development

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.

Here at Ibmi Media, as part of our Web Development Services, we regularly help our Customers to perform AngularJS related queries.

Today is the era of AngularJS, now nobody talks about jQuery they simply jump in MV* frameworks and only AngularJS comes to the rescue.

How to Make Element Draggable in AngularJS Without Using any Module ?

Here, you will learn how to make any element on page Draggable without using any module.

To implement this, you can simply add a Directive which will do it.

In the HTML section, 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://png" atl="Ibmi Media 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);
            }
        }
    };
}]);