AngularJS module for jQueryUI draggable and droppable

Last year, I played a lot with jQueryUI and mostly draggable/droppable along with AngularJS and it was a bit of a pain so I decided to write a directive for it which should make it easy for others to implement such functionalities.

Demos and much more

Fork it on Github

and written test cases also 🙂

Good Night!

55th Neat thing built with AngularJS

I’m extremely glad to announce today that an application I’d built over months in AngularJS has now been listed on

What’s in a name?

y’know like all the funky names, I named it eShell. Oh, wait, its not another terminal emulator. Rather, its an eLearning player – a building block for eLearning courses to be run on created with authoring tools. FYI, An eLearning player is a building block for more conventional eLearning courses. Its pretty basic though I’d a different vision when I decided to write it. You can learn more about it here and here.

I’ve covered:

  • jQueryUi Drag & Drop
  • Form Validation in AngularJS
  • Ordering/Sorting images
  • jPlayer integration to play audios

Working Demo


I’d decided to rewrite the application from the scratch and also written the steps how I did it.

AngularJS + jQueryUI Drag & Drop

Checkout Angular Module to implement drag-and-drop more seemlessly

In this post, I’ve created a simple demo of integration of jQueryUI draggable/droppables in AngularJS. It’s pretty straight forward to understand the code as I’ve heavily commented it so I decided not to explain it in detail.


Updates: More advanced version by Mita Glefler below: