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.

Any control can be moved simply by setting the Moveable property of the control. Controls can also be used as "move handles." A "move handle" is anything that can be clicked to start a movement. For example, in a typical graphical user interface (such as Windows or macOS), you can't simply click on a window to move it. You can only click on its title bar to move it. So, while the window itself is the object that can be moved, the title bar of the window is the "move handle." And in this case, the "move handle" is directed at moving both the window itself and the window it is attached to.

In this example, we define a simple panel and make it moveable. We also have a textbox that is bound to a move handle. If we simply made the textbox moveable, we would no longer be able to click on it and change 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.