DragLib

Core Module

Tutorial

Instance Methods, properties, and Event Handlers

On the previous page, you learned how to get a DragObj instance. On this page, you will learn some things that you can do with that instance.

Developers who wish to examine the source code can search drag.js for DragObj.prototype. The prototype contains all the instance methods and properties of a DragObject instance.

Reference

1. Instance Methods
   • setHandle(oElement) - Drag the object by a handle
   • addDropTarget(oElement) (see Drop Targets)
   • removeDropTarget(oElement) (see Drop Targets)
   • origX()
   • origY()
   • moveToX(iCoordinate)
   • moveToY(iCoordinate)
2. Instance Properties

   Property	Data Type	Description
   dropTargets	Array (see Drop Targets)	array of DropTarget objects - see Drop Targets
   isBeingDragged	boolean	true if the object is being dragged.
   isDragStopped	boolean	true if the object is stopped at the corner of it's container.
   handle	Object	The handle that is used to drag the object. If no handle has been set, then the object itself is returned.
   x	int	The x coordinate, an integral pixel value of the element's left (offsetLeft)
   y	int	The y coordinate, an integral pixel value of the element's top (offsetTop)
   newX	int	New x coordinate that the object will be dragged to. Available before ondragend or ondragdrop.
   newY	int	New y coordinate that the object will be dragged to. Available before ondragend or ondragdrop.

3. Event Handlers
   • onbeforedragstart

     Fires when the object has been grabbed, before the user has moved the mouse.

     If the method for this event handler returns false, the object will not be dragged.

     Example

     win1.onbeforedragstart = function() {
       // prevent dragging.
         return false;
     }
     

   • ondragstart

     Fires when the object has been grabbed, after the user has moved the mouse, before the element has been moved.

   • onbeforedrag

     Fires when the cursor has moved and the object will be moved.

     At this point, you can check two properties to examine the state of the object: newX and newY

   • ondrag

     Fires continuously when the cursor has moved and the object is dragged.

   • ondragstop

     Fires when the user tries to drag the object outside of its container and keepInContainer is set to true.

     At this point, the object is still active; it has not been dropped.

     Returning true will allow the object to be dragged outside of the container.

     At this point, you can check two properties to examine the state of the object: nextX and nextY

     This event handler also fires after the object has been dropped.

   • ondragend

     the user stops dragging by using mousup.

   • ondragdrop

     the object was dropped on one of its dropTargets.

Next in this tutorial: Adding and Removing Drop Targets