In this Tutorial 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 Tutorial 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 ones in an angularjs directive.


The folder structure for this Tutorial is as follows:

./server.js: Node.js web server that serves the static project files.

./images: Folder that contains the images used in the examples.

./dunebook: Project folder.

./dunebook/dragdrop.html: angularjs template for the project.

./dunebook/js/dragdrop.js: angularjs application supporting the custom drag and drop directives.