With the richDraggable
directive defined in the AngularJS Module
object, you can implement it in your views by simply including the rich-draggable
directive in the HTML element definition. For example, to drag a paragraph around, you could use:
<p rich-draggable>My draggable paragraph.</p>
Listing 29.14 shows the implementation used in the example shown in Figure 29.3. It is very basic—just a series of <img>
and <span>
elements that use the rich-draggable
directive.
01 <img class="dragImage" rich-draggable src="/images/arch.jpg" />
02 <img class="dragImage" rich-draggable src="/images/flower.jpg" />
03 <img class="dragImage" rich-draggable src="/images/lake.jpg" />
04 <img class="dragImage" rich-draggable src="/images/volcano.jpg" />
05 <img class="dragImage" rich-draggable src="/images/sunset2.jpg" />
06 <img class="dragImage" rich-draggable src="/images/bison.jpg" />
07 <span class="dragLabel" rich-draggable>Lake</span>
08 <span class="dragLabel" rich-draggable>Volcano</span>
09 <span class="dragLabel" rich-draggable>Sunset</span>
10 <span class="dragLabel" rich-draggable>Bison</span>
11 <span class="dragLabel" rich-draggable>Flower</span>
12 <span class="dragLabel" rich-draggable>Arch</span>