Drag & drop extension
Name
Drag & drop -- reposition a layers through drag & drop.
Description
This extension to the RelativeLayer class adds full drag & drop functionalities with drop targets, event notification and drag limits.
Details
Following is a detailed description of the elements listed in the synopsis.
Methods
RelativeLayer
|
Make another layer a valid drop target. This drop target layer will generate the following events :
- dragdrop, when the dragged layer has been dropped on this target.
- dragenter, when the dragged layer first moves over the drop target.
- dragleave, when the dragged layer moves out of the drop target.
Listeners for these event types will receive an event Object with the following members :
- type
- the type of the event.
- target
- the drop target RelativeLayer that generated the event.
- pageX
- the horizontal position of the mouse in the page when the event occurred.
- pageY
- the vertical position of the mouse in the page when the event occurred.
- source
- the RelativeLayer that is being dragged.
Parameters
- layerId
- the id of the layer that has to become a drop target.
|
|
Stops another layer from being a drop target.
Parameters
- layerId
- the id of the layer that has to stop being a drop target.
|
|
Sets the layer drag general drag behavior. This can be one of the following constants :
- NONDRAGGABLE, to disable the dragging of the layer.
- DRAGGABLE, the enable the dragging of the layer.
- HORIZDRAGGABLE, to enable only horizontal dragging of the layer.
- VERTDRAGGABLE, to enable only vertical dragging of the layer.
When the layer is being dragged, the following events will be generated :
- dragend, when the dragging has stopped.
- dragmoved, when the dragging is active and the layer has been moved .
- dragstart, when the dragging has started.
Listeners for these event types will receive an event Object with the following members :
- type
- the type of the event.
- target
- the RelativeLayer that's being dragged.
- pageX
- the horizontal position of the mouse in the page when the event occurred.
- pageY
- the vertical position of the mouse in the page when the event occurred.
- layerX
- the horizontal position of the mouse in the layer that's being dragged when the event occurred.
- layerY
- the vertical position of the mouse in the layer that's being dragged when the event occurred.
Parameters
- draggable
- the constant that defines the layer's drag behavior.
|
|
Limits the area in which the layer can be dragged. This can be one of the following constants :
- NOLIMITS, to make the layer completely freely draggable.
- AVAILABLELIMITS, the restrict the valid drag area to the available area of the parent layer or window.
Parameters
- draggable
- the constant that defines the layer's valid drag area.
|
|
Toggles the automatic raise of the layer when its being dragged
Parameters
- enabled
- true makes the layer raise automatically when it's being dragged, and false disables this.
|