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 ...

Get Learning AngularJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.