The rubber band (div) first starts with its top and left as fixed based upon first mouse down.
Upon mouse move the width and height of the rubber band (div) is calculated and updated dynamically.
Say suppose x1 and y1 is the first mouse down coordinates, x2 and y2 need to be changed dynamically based upon user mouse move upon the browser.
If x2 and y2 are the current mouse move coordinates then
Width of the rubber band (div) = (x2>x1)? (x2-x1) :( x1-x2)
Height of the rubber band (div) = (y2>y1)? (y2-y1) :(y1-y2)
On mouse up need to not consider the mouse move there after, as rectangle band is created.
Copy the below html page and find the flexibility of creating a rectangle rubber band.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Graphics</title>
<script type="text/javascript" language="javascript">
var bnding=false;
var strtX;
var strtY;
function strtBand()
{
bnding=true;
var x=event.x;
var y=event.y;
document.getElementById('divBand').style.left=x;
document.getElementById('divBand').style.top=y;
document.getElementById('divBand').style.width=0;
document.getElementById('divBand').style.height=0;
strtX=x;
strtY=y;
bnding=true;
}
function moveBand()
{
if(!bnding)
return;
var x=event.x;
var y=event.y;
if(x>strtX)
{
document.getElementById('divBand').style.left=strtX;
document.getElementById('divBand').style.width=x-strtX;
}
if(y>strtY)
{
document.getElementById('divBand').style.top=strtY;
document.getElementById('divBand').style.height=y-strtY;
}
if(x<=strtX)
{
document.getElementById('divBand').style.left=x;
document.getElementById('divBand').style.width=strtX-x;
}
if(y<=strtY)
{
document.getElementById('divBand').style.top=y;
document.getElementById('divBand').style.height=strtY-y;
}
}
function kyPress()
{
if(event.keyCode==27)
{
stopBand();
document.getElementById('divBand').style.width=0;
document.getElementById('divBand').style.height=0;
}
}
function stopBand()
{
bnding=false;
}
</script>
</head>
<body onmouseup="stopBand();" onmousedown="strtBand();" onmousemove="moveBand();" onkeypress="kyPress();">
<table style="width:100%;height:100%">
<tr><td>
<div id="divBand" style="position:absolute;background:lightyellow;border:1px solid gray;"></div>
</td></tr>
</table>
<br /><br />
</body>
</html>
Output:-
 |
4 comments:
Hi,
I tried with your code. But It didn't work for me.....
Your code is absoultely fine !
Worked for me..bingo
Yup! Didn't work for me either.
I think the code needs about half an hour of work to fix!
Thanks for the idea though.
I had trouble with it, too. You are using number values instead of string values with units when assigning your width and height properties. This doesn't work with strict browsers.
Are you willing to edit your post? I'd put up my fix, with on-screen debug info, but the limit for comments is only 4096 characters (too small for code)
Post a Comment