These projects are retired. The development has stopped and we don't provide support for them anymore.

Drag & drop extension

Name

Drag & drop -- reposition a layers through drag & drop.

Synopsis

<SCRIPT LANGUAGE="JavaScript1.2" SRC="scripts/rl_dragdrop.js"</SCRIPT>
                  

Requires

Browser detection

Utility functions and classes

RelativeLayer

Methods

function RelativeLayer
{
void addDropTarget ( String layerId );
boolean removeDropTarget ( String layerId );
void setDraggable ( constant draggable );
void setDragLimit ( constant limit );
void setDragAutoRaise ( boolean enabled );
};

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

addDropTarget
     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.

removeDropTarget
     Stops another layer from being a drop target.

Parameters

layerId
the id of the layer that has to stop being a drop target.

setDraggable
     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.

setDragLimit
     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.

setDragAutoRaise
     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.