Alexandre Jaquet said:
Hi,
I would like to copy and paste a selected item on a web page I already
've a context menu when the user rigth click on an item.
I would like to draw a rectangle who carry about current mouse position
until the user click left to a position.
I know how to draw a rectangle and how to get mouse position, now I need
to know how can I draw the rectangle (move it with mouse coordinate)
until user click a point on the web page.
Thanks in advance
I don't know if this will help you.
It draws a rectangle after the mouse is clicked twice.
A third click "hides" it by setting the rectangle's border to white.
<html>
<head>
<title>rectangle.htm</title>
<script type="text/javascript">
// JavaScript Capture Mouse X-Y Position Script
//
http://www.codelifter.com/main/javascript/capturemouseposition1.html
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseDown
document.onmousedown = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// draw rectangle with a pair of coordinates
rectangle();
return true
}
// Rectabnle code below:
var i = -1;
var x = [0,0];
var y = [0,0];
function rectangle() {
i++;
var d = document.getElementById("rect");
// reset on third mouse click
if (i > 1) {
i = -1;
x = [0,0];
y = [0,0];
d.style.borderColor = "#FFF";
document.body.style.cursor = "default";
window.status = "";
return;
}
document.body.style.cursor = "crosshair";
// get mouse X,Y coordinates
x
= tempX;
y = tempY;
// status bar for testing
window.status = x[0] + "," + y[0] + " : " + x[1] + "," + y[1];
if (i != 1) return;
// calculate left, top, width and height
var xl, yt, xx, yy;
(x[0] < x[1]) ? xl = x[0] : xl = x[1];
(y[0] < y[1]) ? yt = y[0] : yt = y[1];
(x[0] < x[1]) ? xx = x[1]-x[0] : xx = x[0]-x[1];
(y[0] < y[1]) ? yy = y[1]-y[0] : yy = y[0]-y[1];
// draw rectangle
d.style.borderWidth = "1px";
d.style.borderColor = "#000";
d.style.borderStyle = "solid";
d.style.position = "absolute";
d.style.left = xl+"px";
d.style.top = yt+"px";
d.style.width = xx+"px";
d.style.height = yy+"px";
// status bar for testing
window.status += " = " + xx + " x " + yy + " pixels";
return true;
}
</script>
</head>
<body>
<div id="rect"></div>
</body>
</html>
I don't doubt that there's a better way to do this.