×


Make Element Draggable in AngularJS Without Using any Module

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


Now you can test your code output where element will be draggable using a cursor.


[Need urgent assistance to develop your application and Website Project? We are available to help you today. ]


Conclusion

The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the #HTML Drag and Drop API. #draggable can have the following values: true : the #element can be dragged. false : the element cannot be dragged.

If you apply draggable() to the modal dialog element, the browser window scroll bars will drag around the screen as you drag the modal dialog. The way to fix that is to apply draggable() to the modal-dialog class instead: $(". modal-dialog").