docs.intersystems.com
[Home]  
InterSystems: The power behind what matters   
Search:    

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:
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.boolean. 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.boolean. 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:
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.


Send us comments on this page
Copyright © 1997-2019 InterSystems Corporation, Cambridge, MA