|
Applying drag-drop capabilities to elements
in IE 4.x
A while back, a demonstration of an element being dragged
around in a browser during a computer show finally convinced web
developers that DHTML was not just another version of JavaScript, but
something more.
 
In this tutorial, we will demonstrate how to implement onto
your web page drag-drop capabilities in IE 4.x; this is not a tutorial on
how to program your own drag-drop capabilities, but rather, how to install
a pre-made script that enables drag drop.
 Installing the drag-drop engine
We've designed and created the drag-drop engine to make it
as easy to use as possible. The below is the engine, and should be
inserted in the <head> section of your page:
<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script
language="JavaScript1.2">
<!--
/*Credit JavaScript Kit
www.javascriptkit.com*/
var dragapproved=false
var z,x,y
function
move(){
if
(event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return
false
}
}
function drags(){
if (!document.all)
return
if
(event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new
Function("dragapproved=false")
//-->
</script>
</head>
Once the engine has been installed, enabling any element in
a page to be dragable is a snap. Simply give the element a
class="drag" declaration.
Dragging image elements
Assuming we have in front of us a page like this:
<html>
<head>
<!--drag
engine code
here-->
</head>
<body>
<img
src="test.gif"><br>
<img
src="test2.gif"><br>
<b>"Hi
there</b>
</body>
</html>
To apply drag-drop capabilities to the first two images
above, do this:
<html>
<head>
<!--drag
engine code
here-->
</head>
<body>
<img
src="test.gif" class="drag"><br>
<img
src="test2.gif" class="drag"><br>
<h1><b>"Hi
there</b></h1>
</body>
</html>
The two images will now move when the mouse drags them.
Dragging text elements
What about text elements, you say? Well, the engine handles
them just as well:
<html>
<body>
<img
src="test.gif"><br>
<img
src="test2.gif"><br>
<h1><b class="drag">"Hi
there</b></h1>
</body>
</html>
Hi there
Notice that the class="drag" declaration is added to the innermost
element, the <b> element, and not the <h1> element.
Now that elements in a page can be dragged, its time to find a
practical reason to do so! | 