Here is a simple javascript click and drag example. It contains a “Drag Handle” and gets the parentNode as the whole object to drag. So the “handle” could be an image in a div to click and drag around the window.
I used global variables and really the main criteria to use the script is to have your “drag handle” defined class=”dragHandle” as the global event handler “mousedown” does the rest.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
<!--
.regular {
background-color: #0099FF;
border: 2px solid #000066;
}
.drag {
background-color: #0099FF;
border: 2px solid #000066;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
z-index:100;
}
.dragHandle {
cursor:move;
background-color:#003399;
color:#FFFFFF;
display:block;
padding:2px 0;
width:150px;
text-align:center;
}
-->
</style>
<script type="text/javascript">
document.onmousemove=getMouseMove
document.onmousedown=getMouseDown
document.onmouseup=getMouseUp
var clicked = false;
var x;
var y;
var element;
var clickX;
var clickY;
reg = new RegExp("([0-9]*)px", "i");
function getMouseDown()
{
clickItem = event.srcElement;
if(clickItem.className && clickItem.className == "dragHandle")
{
clicked = true;
element = clickItem.parentNode;
if(event.offsetX || event.offsetY) {
clickX=event.offsetX;
clickY=event.offsetY;
}
else {
clickX=event.pageX;
clickY=event.pageY;
}
element.className = 'drag';
}
}
function getMouseMove() {
if(clicked == true) {
elementX = parseInt(reg.exec(element.style.left)[1]);
elementY = parseInt(reg.exec(element.style.top)[1]);
if(event.offsetX || event.offsetY) // IE
{
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY;
x=elementX + (event.offsetX - clickX);
y=elementY + (event.offsetY - clickY);
if(x < 0){x=0;event.pageX = clickX;}
if(y < 0){y=0;event.pageY = clickY;}
} else { // Netscape or FireFox
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY ;
x=elementX + (event.pageX - clickX);
y=elementY + (event.pageY - clickY);
if(x < 0) x=0;
if(y < 0) y=0;
}
element.style.left = x +'px';
element.style.top = y +'px';
document.getElementById('xval').innerHTML = x;
document.getElementById('yval').innerHTML = y;
}
return;
}
function getMouseUp() {
if(clicked == true)
{
clicked = false;
element.className = 'regular';
element = null;
}
}
</script>
</head>
<body>
<div id="dragContainer" class="regular" style="position:absolute; top: 34px; left: 135px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="dragContainer2" class="regular" style="position:absolute; top: 34px; left: 467px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="dragContainer3" class="regular" style="position:absolute; top: 148px; left: 303px; height: 200px; width: 150px;" >
<div class="dragHandle">
Drag Title
</div>
<div id="content">
Here is some text in a box being draged. <a href="#" >Link goes here</a>
</div>
</div>
<div id="data">
<br>X: <span id="xval"></span>
<br>Y: <span id="yval"></span>
<br>
<br>Xtop: <span id="xtopval"></span>
<br>Ytop: <span id="ytopval"></span>
<br>
<br>x: <span id="x"></span>
<br>y: <span id="y"></span>
</div>
<body>
</body>
</html>
13 comments ↓
Bad coding practice; works in IE only
Robin,
You can help fix it and share your solution. I work in an IE only enviroment and don’t always get a chance to test/fix it for other browsers.
Working in an IE only environment _is_ bad coding practice? Go read up on IE
Ignore the lectures from these guys. It’s still an IE world, and IE-only is acceptable and/or required by my Fortume 100 clients.
Cross-browser coding is a near-complete waste of time. The practice also boils all code down to losest common functionality when you must preclude fantastic IE capabilities other browsers will NEVER have.
Thanks for sharing your code and talents.
Thanks Man!!!. I found this code very helpful.
“It’s still an IE world”
“Cross-browser coding is a near-complete waste of time. The practice also boils all code down to losest common functionality when you must preclude fantastic IE capabilities other browsers will NEVER have.”
That’s pretty ignorant dude!
More and more people are realizing IE is not the way to go, and keeping your website accessible to everyone is NOT a waste of time.
“Cross-browser coding is a near-complete waste of time. The practice also boils all code down to losest common functionality when you must preclude fantastic IE capabilities other browsers will NEVER have.”
Hehe, now in 2008 that’s a pretty funny comment.
But hey – thanks for the code anyway!
You’re right man, 42% people using Firefox are definitely negligible…
http://www.w3schools.com/browsers/browsers_stats.asp
w3schools(or tech related sites) will have a higher percentage of users using FF than your average site, but yes FF/Chrome/Opera/Safari are a growing percentage.
My hopes for the given code is to give users a starting place of something usable, not to provide a cross browser solution in every case.
To anyone who thinks cross-platform coding is a waste of time, go jump off a cliff. Sorry to be harsh, but while IE6 certainly blows the big one, a properly-built website running on good CSS will require NO MODIFICATION to work in IE6 and beyond. So, I say phooey to you. My code is good enough to not require IE-specific hacks. I’m sorry yours isn’t.
@Dave,
I believe it is worth while and necessary to develope cross platform code when it is accessible from the internet. This code was for a simple internal Intranet application, which is also restricted to IE(not my control).
Also this is javascript and unfortunately there are some specific differences between IE and other browsers and has nothing to do with the CSS.
@everyone
I’m disgusted at those who expect everything to work without any effort on their part and no desire to contribute. Acting as if they paid for this.
I you can’t contribute go find what you want somewhere else.
FF may be open source and collaboration oriented but those that complained are only on the selfish end.
And if you can’t contribute your time or expertise, have you ever clicked “Donate”
nice tutorial, thanks for sharing this . I was searching for such a solution…
Leave a Comment