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

Making in-page elements or containers give more flexibility to user, so that he can move or drag stuff as per requirement.
In jQuery UI we are pretty much aware about Draggable function which makes thing a lot easier. jQuery is still loved due to its plug play and enjoy 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 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 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 

 

Leave a Reply

Your email address will not be published. Required fields are marked *