Page History

...

To enter client design mode using:

	controller.setDesignMode(true)

To exit client design mode:

	controller.setDesignMode(false)

...

• onDrag: fires when the user starts dragging an element
  The method should return a DRAGNDROP constant for what mode is supported or a combination of 2 constants:
  DRAGNDROP.MOVE if only a move can happen,
  DRAGNDROP.COPY if only a copy can happen,
  DRAGNDROP.MOVE|DRAGNDROP.COPY if a move or copy can happen,
  DRAGNDROP.NONE if nothing is supported (drag should not start).
  To be able to cancel the drag if the user sets the element somewhere it should not go, the start positions should be saved here so they can be restored in the onDrop.
• onDrop: fires when the user drops an element that was being dragged
  This event handler can be used to retrieve the new position of the Element for persisting it
• onSelect: fires when a user selects an element 
  Every element that is selected will get this event. If the event handler returns false the element will not be selectable by the user.
  It is also possible to apply this restriction on the element beforehand, see #Limiting Limiting user actions. This option is preferred, especially in the Web Client, as using the onSelect event handler requires a callback to the server, thus a delay in the user experience 
• onResize: Fires when a user has resized an element
  This event handler can be used to retrieve the new size of the Element for persisting it

...

Making an element not selectable in Client Design mode:

elements.\{elementName}.putClientProperty(CLIENTDESIGN.SELECTABLE, false);

...

If the directions in which the element is resizable should be restricted, this is possible using the following code:

elements.\{elementName}.putClientProperty(CLIENTDESIGN.HANDLES, ['r', 'l']); 

...

 These are runtime properties and will be lost by use of controller.recreateUI().

...