Chapter 13. Drag-and-drop basics
This chapter covers
- Understanding the drag-and-drop workflow
- Dissecting the Ext JS drag-and-drop classes
- Implementing drag-and-drop override methods
- Exercising the full drag-and-drop lifecycle
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. We use drag and drop just about every time we use a modern computer without giving it a second thought. If you step back and think about it, you’ll realize how this makes our lives 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 one location to the recycle bin? Let’s quickly 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, this 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 the RIA user. What if you could use drag and drop to simplify their experience?