PDA

Click to See Complete Forum and Search --> : clientX

donbes
07-23-2003, 02:11 PM
please look at the following code:
function don()
{
if(event.srcElement.className== 'myClass'&& event.button==1 )
{

event.srcElement.style.pixelLeft = event.x;

//event.srcElement.style.pixelTop = event.clientY;

}
}
//-->
</script>
</HEAD>
<body onmousemove="don()" MS_POSITIONING="GridLayout">
</body>

It is so that the usr can move the element witv the mouse. Why does it go only to the right? Please help with a simple code
Jona
07-23-2003, 02:37 PM
The code will only work in Internet Explorer.


function don(){
if(event.srcElement.className=="myClass" && event.button==1){
event.srcElement.style.pixelLeft=event.x;
event.srcElement.style.pixelTop=event.y;
}
}
</script>


[J]ona
Mr J
07-23-2003, 04:53 PM
You need a little bit more coding in there.
The following works in IE5.5+ and NS7


<script type="text/javascript">
<!--
var ns=document.getElementById&&!document.all
var moving = false;
var tempX = 0;
var tempY = 0;
var dex=""

function dragnow(id) {
elm_id = document.getElementById(id)
if(dex!=""){
dex.style.zIndex = ""
}
moving=true

posX = tempX - elm_id.offsetLeft;
posY = tempY - elm_id.offsetTop;
elm_id.style.zIndex = 1
dex=elm_id
}

function moveto(e) {
tempX = (!ns) ? event.clientX : e.pageX;
tempY = (!ns) ? event.clientY : e.pageY;
if(moving != false) {
elm_id.style.left = (tempX - posX) + "px";
elm_id.style.top = (tempY - posY) + "px";
}
}

document.onmousemove = moveto;
document.onmouseup=new Function("moving=false");

//-->
</script>

<div id="dis1" onmousedown="dragnow(this.id)" style="position:absolute;top:100px;left:50px;height:100px;width:100px; background:#00FF00"> </div>

<div id="dis2" onmousedown="dragnow(this.id)" style="position:absolute;top:100px;left:200px;height:100px;width:100px; background:#FFFF00"> </div>

<div id="dis3" onmousedown="dragnow(this.id)" style="position:absolute;top:100px;left:350px;height:100px;width:100px; background:#FF0000"></div>

<div id="dis4" onmousedown="dragnow(this.id)" style="position:absolute;top:100px;left:500px;height:100px;width:100px; background:#0000FF"></div>
donbes
07-24-2003, 09:08 AM
please can u briefly do some comments for the upper part of the code where we have "offsetLeft etc?
Thanks
Mr J
07-24-2003, 11:38 AM
Hope this helps


Using an object size of 100 x 100

posX = tempX - elm_id.offsetLeft;
posY = tempY - elm_id.offsetTop;

Taking that the object is positioned at (200,100) if the cursor is positioned at the center of the object the cursor position will be
cursor positionx = 250
cursor positiony =150

Therefore the cursor position within the object is

posX = 250 - 200 = 50
posY = 150 - 100 = 50

The cursor position within the window
tempX = (!ns) ? event.clientX : e.pageX
tempY = (!ns) ? event.clientY : e.pageY;

which gives

tempX = 250 cursor positionx
tempY= 150 cursor positiony


The position of the object
elm_id.style.left = (250 - 50) + "px";
elm_id.style.top = (150 - 50) + "px";

As the mouse is moved these calculation are run and the object is so positioned