clientX

@donbesJul 23.2003

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

to post a comment

JavaScript

@JonaJul 23.2003 — #[font=arial][color=maroon]The code will only work in Internet Explorer.[/color][/font]

[font=monospace]

function don(){

if(event.srcElement.className=="myClass" && event.button==1){

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

event.srcElement.style.pixelTop=event.y;

}

}

</script>

[/font]

[b][J]ona[/b]

@Mr_JJul 23.2003 — #You need a little bit more coding in there.

The following works in IE5.5+ and NS7

<script type="text/javascript">



</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>

@donbesauthorJul 24.2003 — #please can u briefly do some comments for the upper part of the code where we have "offsetLeft etc?

Thanks

@Mr_JJul 24.2003 — #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

clientX

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

clientX

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴