Revision:
The Drag Object is a unified piece of code which allows you to selectively make Dynamic Layers draggable with a minimal amount of coding. All that's needed is to set up the drag.js file, initialize your DynLayers, and then add them to the drag object.
The Drag object is based around the DynLayer and the DynAPI Mouse Events. You simply add DynLayers to the Drag Object to make them draggable, and remove them from the drag object to make them static again.
The required DynAPI scripts are:
<script language="JavaScript" src="../dynlayer.js"></script> <script language="JavaScript" src="../mouseevents.js"></script> <script language="JavaScript" src="../drag.js"></script>
Make sure to have the drag.js after the mouseevents.js
The Drag Object code will automatically intialize a generic "drag" object which is the default (ie. you don't have to insert this code):
drag = new Drag()
However, being that this is an object you could create multiple drag objects to define different groups of draggable layers.
Mouse Event Handling
The mouse event handling for the Drag Object is now taken care of by the new DynAPI Mouse Events code. All you have to do is include the mouseevents.js file and call the initMouseEvents() function:
function init() {
// initialize DynLayers here
initMouseEvents()
}
The mouse handling only takes care of the default "drag" object. If you have other Drag objects you'll have to include a call to yourdrag.mouseDown(x,y), yourdrag.mouseMove(x,y), and yourdrag.mouseUp(x,y) into each of the DynMouseDown() Move() and Up() functions.
The Drag Object's add() method is what you use to make your layers draggable. The usage is pretty simple:
drag.add(dynlayer1, dynlayer2, etc...)
Where dynlayer1, dynlayer2, etc... is the names of your DynLayers. The method will accept any number of DynLayers in a row, or you can add them separately. As soon as they're added they will become draggable, this can be done at any time after the page has been loaded. The following init() function will make each of the DynLayers draggable as soon as the page is finished loading:
function init() {
// initialize DynLayers
blue = new DynLayer("blueDiv")
red = new DynLayer("redDiv")
green = new DynLayer("greenDiv")
purple = new DynLayer("purpleDiv")
// add the draggable layers to the drag object
drag.add(bluered,green,purple)
initMouseEvents()
}
That's all that's necessary to get your drag and drop layers working.
remove() Method:
You can remove a DynLayer from the Drag Object, and therefore making it no-longer draggable, by using the remove() method. It's syntax is the same as the add() method:
drag.remove(dynlayer1, dynlayer2, etc...)
resort Property:
The resort property determines whether the layer that is being dragged will be layered on top of all the other layers. By default, when you click a draggable layer the Drag Object will make the z-index of that layer higher than all the rest. This may not be what you want, so you can turn it off by calling:
drag.resort = false
setGrab() Method:
The setGrab() method allows for only a portion of the layer to be "grabbable", this allows for draggable toolbars, or window-like layers (see DynWindow Object).
drag.setGrab(dynlayer,top,right,bottom,left)
This method is entirely optional, if you don't call it the entire layer will be "grabbable"
checkWithin(x,y,left,right,top,bottom) Function:
The checkWithin() function can be used to check if a particular coordinate is with a certain boundary. This function is used by the Drag Object to determine when a layer has been clicked on. But it can also be used for other things such as determining if you've dropped the object onto a particular area of the page.
To use the checkWithin() function you need a test coordinate (x and y) and you compare that to 4 other values (left,right,top,bottom) which represent a square portion of the page:
checkWithin(x,y,left,right,top,bottom)
checkWithinLayer(x,y,lyr) Function:
Same as checkWithin() except it checks if x,y is within the drag boundaries of the DynLayer (lyr). This can only be used for DynLayers that are part of the Drag Object either as a drag layer or a drop target layer.
If you want to "do stuff" before you drag a layer, while you're dragging a layer, or when you're finished dragging the layer, you'll need to implement the onDragStart, onDragMove, and onDragEnd event handlers respectively.
drag.onDragStart = startHandler drag.onDragMove = moveHandler drag.onDragEnd = endEndler
In your handler functions you can use any of the properties of the drag object to manipulate
Making drop targets allow you to easily determine if your dragging layer has been dropped on top of another. For example if you had a shopping cart and wanted to drop an item onto the basket you'd make the layer with the basket a drop target.
You do that with the addTarget() method:
drag.addTarget(target1,target2,target3) // target1,2,3 are DynLayers
Then to do something when a drag layer has been dropped on the target, you must implement a onDrop event handler:
drag.onDrop = dropHandler
If you have multiple targets, you can determine which target was dropped on with the drag.targetHit property:
function dropHandler() {
if (this.targetHit == target1) alert("you hit target 1")
}
Example: drag1.html [source] - simple drag example.
Example: drag2.html [source] - uses the onDragStart onDragMove and onDragEnd events.
Example: drag3.html [source] - uses Drop targets
| Home | Next Lesson: Creating and Destroying Layers |