Skip to main content

Drag and Drop

Drag and Drop

Drag and drop describes a simple mechanical operation that permits the application user to change the positions of items on the Zen page by direct manipulation on the client side. The user clicks on an item with the mouse and holds down the mouse button to “drag” the item to another position on the page. Releasing the mouse causes the item to “drop” into its new position. The item being dragged could be:

  • A Zen component that the user wishes to reposition on the page. Zen provides several active group components that permit the user to rearrange their internal layout by dragging and dropping components within the group. For details, see the “Client Side Layout Managers” chapter in Developing Zen Applications.

  • A single item within a Zen component that the user wishes to add or reposition. The <listBox> control allows the user to reorder entries in a list, or move an entry from one list to another, using drag and drop gestures. This is in addition to data drag and drop, which the <listBox> also supports. For details, see “<listBox> Drag and Drop” in the “Zen Controls” chapter of Using Zen Components.

  • Data, such as the contents of a <text> control on a form. Data drag and drop means that the user picks up data from one Zen component and drops it onto another component, replacing the value of the field where the data was dropped. Specifically, the user moves the data by clicking on it with the mouse, dragging it into position while holding down the mouse button, then dropping it on the destination field by releasing the mouse button. For details, see “Data Drag and Drop” in the “Zen Controls” chapter of Using Zen Components.

    For the most part, data drag and drop applies only to control components, each of which has a logical value and a display value to be dragged. However, <dynaTree>, which is not a control, also supports data drag. Each of its nodes has a logical value and a display value. For details, see “<dynaTree> Drag and Drop” in the “Other Zen Components” chapter of Using Zen Components.

Drag and drop is enabled only when the <page> has its dragAndDrop attribute set to true. When this is the case, the following attributes may apply to any Zen component on the page. These attributes are most frequently used to configure Zen controls, but they are actually available for, and apply to, any Zen component.

Drag and Drop Behavior Attributes
Attribute Description
dragEnabled

If true, and if dragAndDrop is enabled for the page, then this component can serve as a drag source. That is, users can start a drag and drop operation over this component. The default for dragEnabled is false.

This attribute has the underlying data type %ZEN.Datatype.booleanOpens in a new tab. It has the value "true" or "false" in XData Contents, 1 or 0 in server-side code, true or false in client-side code.

dropEnabled

If true, and if dragAndDrop is enabled for the page, then this component can serve as a drop target. That is, users can end a drag and drop operation over this component. The default for dropEnabled is false.

This attribute has the underlying data type %ZEN.Datatype.booleanOpens in a new tab. It has the value "true" or "false" in XData Contents, 1 or 0 in server-side code, true or false in client-side code.

onafterdrag

If dragEnabled is true and dragAndDrop is enabled for the page, this client-side JavaScript expression runs whenever a drag operation that started within this component completes. Generally this expression invokes a client-side JavaScript method defined in the page class. This method becomes the “onafterdrag event handler” for the component.

When providing a value for an event handler attribute such as onafterdrag, use double quotes to enclose the value and single quotes (if needed) within the JavaScript expression. For example:

<tablePane ondblclick="alert('HEY');"/>

onbeforedrag If dragEnabled is true and dragAndDrop is enabled for the page, this client-side JavaScript expression runs whenever a drag operation has been initiated within this component but before the component has started to process the event. This is for cases in which you want to override the default drag behavior of a component. For example, you might want to change the visual representation of the data being dragged from a text caption to a graphical image while it is being dragged.
ondrag If dragEnabled is true and dragAndDrop is enabled for the page, this client-side JavaScript expression runs whenever a drag operation has been initiated within this component.
ondrop If dropEnabled is true and dragAndDrop is enabled for the page, this client-side JavaScript expression runs whenever a drop operation occurs within this component.

Rather than providing values for onafterdrag, onbeforedrag, ondrag, and ondrop attributes in the previous table, it can be more convenient to build the desired behavior into a custom component. This can be useful to ensure consistency, because this way application developers are not required to specify the attributes for drag and drop each time they place the component on the page. Instead, developers choose the custom component, which already has the desired drag and drop behavior built into it. For information about customizing drag and drop behavior, see “Data Drag and Drop Methods” in the “Custom Components” chapter of Developing Zen Applications.

Zen reports performs drag and drop initialization when a page is loaded. If you dynamically add or remove elements from the page, you need to call the method ZLM.initTargetNodes to activate drag and drop behavior for the new elements. The Document Object Model (DOM) needs to be stable when you call this method. The circumstances under which the DOM is stabile, and ways to test for stability, vary from one browser to another.

FeedbackOpens in a new tab