Making a Control Moveable

Here we demonstrate the moveable controls capability of QCubed, also known as "Drag and Drop". All dragging, dropping and resizing capabilities are implemented through an interface to jQuery UI. Seeing the examples and reviewing the documentation on Draggable, Droppable and Resizable at the jQuery UI Web site will help you understand more about these capabilities.

All Controls are capable of being moved simply by setting the Moveable attribute of the control. Controls are also capable of being "move handles". A "move handle" is anything that you can click which can begin execution of a move. For example, in a standard GUI (e.g. Windows or the Mac OS), you cannot just click anywhere on a window to make the window move. You can only click on a window's Title Bar to get that window to move. So while the window, itself, is a moveable object, the window's Title Bar is the "move handle". And in this case, the "move handle" is targeted to move itself as well as the window it is connected to.

In this example, we define a simple Panel and make it Moveable. We also have a TextBox paired with a move handle. If we just made the TextBox movable, we would no longer be able to click in it and edit the text in the box.

When you make a control Moveable, you can then access the DragObj attribute of the control to get access to the draggable jQuery UI routines.