How to 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. 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.


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”.

It’s time to check your output where you should have that element draggable using cursor.

See you


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

Notify of