| Step 1: Add the below code to the <HEAD> section of your page: Code <script type="text/javascript" src="dom-drag.js"></script> Step 2: As you can see, this script references an external .js file. Download "dom-drag.js" (right click, and select "Save-As"), and upload to your web page directory. And that's it, well the installation part at least. Applying the script to an element
Note: See also: author's tutorial page. Now here comes the fun part, making an element on the page dragable! The basic version To make an element draggable using this script simply call Drag.init(obj), with "obj" being the reference to the element in question. For example:
Code <img id="example" src="lips.gif" style="position: relative" />
<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script> A couple of important points to mention here: This script can only be used on relatively or absolutely positioned elements. Furthermore, you should define its "position" inline inside the element, for example: <img src="cake.gif" style="position: relative" />.
The method Drag.init(obj) obviously should be called following the element in question. Alternatively you can also call this method after the page has loaded (window.onload). Creating a draggable handle Sometimes you want to set only a special area within a complex object to be draggable - aka a handle. To do this, pass two references to the method Drag.init(): the handle and the root. Code <div id="root" style="left:50px; top:50px;"> <div id="handle">Handle</div> Some text </div> <script type="text/javascript"> var theHandle = document.getElementById("handle"); var theRoot = document.getElementById("root"); Drag.init(theHandle, theRoot); </script> See complete example When you view the source of the example page above, notice how while most of the CSS for the DIV is defined in the HEAD section of the page, at the very least, the "top" and "left" properties to affect initial positioning need to be defined inside the <DIV> tag itself. Limiting the range of the drag You can also set up the drag behavior in a way so the dragging is limited by range, whether vertically or horizontally. This is useful, for example, when you're creating an artificial scrollbar, and it should only be allowed to be dragged vertically or horizontally a certain distance. Code <div id="thumb" style="position: relative; left:0; top:0;"></div>
<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 0, 300, 0, 0);
</script> See another example. (absolutely positioned scrollbar instead of relative). Those 4 numbers at the end are the constraining rectangle of the draggable object. They go in the order: minX, maxX, minY, maxY. You can set some of them to null to tell DOM-Drag that motion in that direction should not be constrained. Note also how we have set the root object parameter to null in this case, since the thumb is not a handle for anything. Drag and react What good is dragging if it your page cant be aware of and react to this action? DOM-Drag fires three events into the environment that you can tap into: .onDragStart(x,y)
.onDragEnd(x,y)
.onDrag(x,y). These custom event handlers allow your page to react to the dragging in any fashion your creativity takes you. Take a look at this script to see how to use some of these event handlers:
Code <script language="javascript">
var aThumbv = document.getElementById("thumbv");
var scrolldiv=document.getElementById("scrollcontent");
Drag.init(aThumbv, null, 0, 0, 0, 150);
aThumbv.onDrag = function(x, y) {// x, y contains current offset coords of drag
scrolldiv.style.top=y * (-1) +"px";
}
</script> See complete example
GamesCenter wont grow unless you register! C'mon you know you want to ~I might be a little slow. I'm getting used to the Mac
Message edited by Mistory - Friday, 2009-10-09, 9:05 Am | 
