pageX/Y in firefox 3 problem...

hizuka007

06-27-2009, 08:43 AM

Good day,

I'm having problem with pageX/Y javascript using firefox 3 and Netscape. It seems that firefox does not read my code if pageX and pageY is present.
But works perfectly in ie6, safari.

html code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="drag.css" />
<script type="text/javascript" src="drag.js"> </script>
</head>

<body>
<div id="box"></div>
</body>
</html>

JS code:

// JavaScript Document
window.onload= initDrag;

function initDrag(){
var box = document.getElementById("box");
var isMouseDown = false;
var x=0;
var y=0;

box.onmousedown = box_down;
box.onmouseup = box_up;
box.onmousemove = box_move;
box.onmouseout = mouse_out;

function box_down(){
isMouseDown = true;

}
function box_up(){
isMouseDown = false;

}
function box_move(){
if(isMouseDown){
if(event.clientX || event.clientY) //IE
{
x = event.clientX;
y = event.clientY;

}
else{ // Not IE
x = event.pageX;
y = event.pageY;
}

box.style.top = (y - 50) + "px";
box.style.left = (x - 50) + "px";
}

}
function mouse_out(){
isMouseDown=false;
}
}

css:

#box{
background-color: #999999;
width: 100px;
height: 100px;
position: absolute;
}

any idea?

Thanks

vwphillips

06-27-2009, 10:39 AM

// JavaScript Document
window.onload= initDrag;
var isMouseDown = false;

function initDrag(){
var box = document.getElementById("box");
var isMouseDown = false;
var x=0;
var y=0;

box.onmousedown = box_down;
box.onmouseup = box_up;
box.onmousemove = function(e){ box_move(e); }
box.onmouseout = mouse_out;

function box_down(){
isMouseDown = true;

}
function box_up(){
isMouseDown = false;

}
function box_move(e){
if(isMouseDown){
box.style.top = (zxcMse(e)[1] - 50) + "px";
box.style.left = (zxcMse(e)[0] - 50) + "px";
}

}
function mouse_out(){
isMouseDown=false;
}
}

function zxcMse(ev){
if(!ev) var ev=window.event;
if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
return [ev.pageX,ev.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

hizuka007

06-27-2009, 01:22 PM

ok it work almost fine, but it only grip the center (almost)... but anyway thanks.

... Im gonna try to understand your code, because it looks complicated to me... and im not an expert to this thing :)

thanks