By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,773 Members | 1,334 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,773 IT Pros & Developers. It's quick & easy.

copy & paste

P: n/a
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 :)
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"Alexandre Jaquet" <al***@floor.ch> wrote in message
news:d2**********@news.hispeed.ch...
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/javas...position1.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[i] = tempX;
y[i] = 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.
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.