Node.js, MongoDB, and AngularJS Web Development

Defining the Draggable Custom AngularJS Directive

Listing 29.13 defines a custom directive named richDraggable. This directive stores the initial position of the element passed in when the template is compiled and then registers a handler with the mousedown event on the element.

When the mouse is pressed, the handler adds events for mousemove and mouseup. The mousemove handler adjusts the top and left CSS attributes to move the element around the screen. The mouseup event handler unbinds the mousemove and mouseup event handlers to stop dragging.

Listing 29.13 rich_ui_app.js-richDraggable: Implementing the AngularJS custom directive to allow page elements to be moved

Click here to view code image

001 var app = angular.module('richApp', []);