Chapter 12. Drag-and-drop
This chapter covers
- Understanding the drag-and-drop workflow
- Dissecting the Ext JS drag-and-drop classes
- Implementing drag-and-drop override methods
- Understanding the drag-and-drop life cycle
- Using the drag-and-drop plug-ins
One of the greatest advantages of using a graphical user interface is the ability to easily move items around the screen with simple mouse gestures. This interaction is known as drag-and-drop. You use drag-and-drop without giving it a second thought just about every time you use a modern computer. If you step back and think about it, you’ll realize how this feature makes your life a lot easier.
Want to delete a file? Click and drag the file icon and drop it on the trash or Recycle Bin icon. Easy, right? What if you didn’t have drag-and-drop? How would you move a file from its location to the Recycle Bin? Let’s ponder the possibilities. You’d first click the file to provide it focus. You could then use a keyboard key combination to “cut” the file. You’d then have to find and focus the Recycle Bin window and use the keyboard key combination to “paste” it in. Another option would be to click to select the file to focus it and press Delete on your keyboard, but if you’re right-handed, doing so would require you to take your hand off your mouse. In contrast, drag-and-drop is much simpler, isn’t it? Now put yourself in the world of RIA users. What if you could use drag-and-drop to simplify their experiences?