Implementing Draggable Elements

With the weather view complete, you can move on to the draggable view. The draggable view illustrates using web elements in unconventional ways. The actual implementation is simple. A custom AngularJS directive allows you to make elements draggable by hooking into the mouse events and changing relative CSS position of the element.

In this example, you make several images and words draggable. You can drag them around the screen as much as you like. This example could make a good teaching aid for a small child but can be utilized in many other creative ways as well.