O'Reilly logo

Learning AngularJS by Brad Dayley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Implementing Draggable and Droppable Elements

In this example you will use custom AngularJS directives to implement a set of draggable elements containing words that can be dragged onto a set of droppable image elements. When the word is dropped on an image, it is appended to a list of words that appear below the image.

The purpose of this exercise is to show you an example of using the HTML5 drag and drop events. The example only uses the events, and the actual drag and drop functionality is built using the AngularJS mechanisms. The reason for this is to illustrate using AngularJS (plus, frankly, the HTML5 drag and drop is not well implemented and needs to be revised). Another thing illustrated in this example is appending new elements to existing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required