Move the mouse over the square and you will see the Mouse Coordinates displayed underneath.
Press mousedown on the Picture and Drag it round the square.
On Mouse up the Picture is Dropped.
coordinates
First let's explain how the Mouse Coordinates can be displayed
The div tag needs a onmouseover eventhandler, that will pass an Event Object : event
<div
onmousemove
=
"
movingCoords(
event
)
"
>
.......
</div>
This event object has 2 attributes: event.clientX and event.clientY,
that tell us exactly where the mouse cursor was, when it fired the mouse-over-event:
function
movingCoords(
event
){
p.innerHTML
=
" mouseX = " +
event
.
clientX
+ " mouseY = " +
event
.
clientY
}
Track the MouseCoordinates......... .... "TryoutPanel1"
<script >
function movingCoords(event){ // function will display coordinates
var span=document.getElementById('mySpan');
span.innerHTML="mouseX = " + event.clientX + ", mouseY = " + event.clientY;
}
</script>
Roll mouse over the DIV
<div
style="width:400px ; height:300px ;
position:relative ; border:solid 1px orange;
font-size:25"
onmousemove=" movingCoords(event) ">
<span id="mySpan" style=" position:absolute; left:200px; top:0px;background-color:lightGreen">...</span>
</div><br>
<ul><li>Can you measure the <b>width</b> and <b>height</b> of this DIV
without looking at the attributes? </li>
<li>Change the span's <b>top</b> and <b>left</b> properties
and compare them with the mouseX and mouseY (24)</li></ul>
Second, let's look at how the Picture attaches itself to the Mouse Cursor.
If the Picture stays in the same place as the Mouse,
it must be taking the same X and Y coordinates as the Mouse Cursor.
The Picture's left (x) and top(y) properties are relative to <div>-tag ,
var
rect
=
div
.
getBoundingClientRect()
;
var
insideX
=
event
.
clientX
-
rect
.
left
;
var
insideY
=
event
.
clientY
-
rect
.
top
;
We convert the Mouse coordinates with getBoundingClientRect() to make them also relative to the <div>-tag.
Reset the pictures left and top
style properties to the converted MouseCoords:insideX insideY.
pict.style.left
=
insideX
-
(
parseInt(
pict.style.width
)
* 0.5
)
+ "px"
;
pict.style.top
=
insideY
-
(
parseInt(
pict.style.height
)
* 0.5
)
+ "px"
;
Adjust for picture.width to set it in the middle of the cursor.
Drag an Image......... .... "TryoutPanel2"
<script >
function dragPict(event){ /////////////// ////// drags the picture around
var pict=document.getElementById("mySpounge");
var div=document.getElementById("div000");
var rect = div.getBoundingClientRect(); // get imaginary rectangle
var insideX = event.clientX - rect.left ; // convert mouseX-coords
//.......convert mouseY coord from relative to window,to relative to DIV
pict.style.left=insideX-(parseInt(pict.style.width)*0.5)+'px';
//.....Set pict's top property to the insideY coord.
}
</script>
<p style="font-size:20px ; color:purple">
this PICT will follow the mouse X coords inside DIV.
</p>
<div id="div000"
style="width:500px; height:300px ; position:relative ; border:solid 1px red"
onmousemove=" dragPict(event) ">
<img id="mySpounge"
src="/pics/spoungbob_smiley_face.png"
style="width:50px ; height:50px; left:0px;top:0px ;position:absolute" />
</div>
<ul><li>Make it also work for the mouseY coords(11,14)</li>
<li>can you make it work with a click-event?(27)</li>
</ul>
It would be nice if we could Attach and letGo off the mouse at will.
In the attach(img) function the variable: pict holds the image: pict=img;
In the letGo() function: pict drops it again: pict=null;
function
attach
(
img
) {
pict
=
img
;
}
function
letGo
( ) {
pict
=
null
;
}
When you press Mouse Down on the <img>-tag the attach(img) function is "called".
On mouse Up the letGo() function is called.
<img
onmousedown
=
"
attach(
this
)
"
onmouseup
=
"
letGo()
"
/>
This example works almost the same as example 1 except there are more pictures
and there is a checkAnswer function to judge if the user dropped the picture in the right category.
The attach2() and letGo2() use now the variables : dragImg and checkImg.
The dragImg is the image that is currently being dragged by the mouse
The checkImg is the image that is just dropped , and ready for checking.
function
letGo2
( ) {
checkImg
=
dragImg
;
dragImg
=
null
;
}
An image can never be dragImg and checkImg at the same time, because when we drag(attach),
the image it is not ready for checking yet. So checkImg = null;
This is the checkAnswer function.
It compares the id attribute of the <div> (category) with the name attribute of the image
function
checkAnswer
(
category
) {
if (
checkImg
! =
null
) {
if (
checkImg.name
==
category
){
checkImg
.
style.border
=
"solid 2px green" ;
}
else{
checkImg
.
style.border
=
"solid 2px red" ;
}
}
}
Make your own Check the Category Game......... .... "TryoutPanel3"
<script>
var dragImg=null; // global variables for the
var checkImg=null; // drag-able and check-able image
function dragThisPict(event) { // DRAG the IMAGE
var div=document.getElementById("div111");
var rect = div.getBoundingClientRect(); // get imaginary rect
var insideX = event.clientX - rect.left ;
var insideY = event.clientY - rect.top ; // make relative to DIV
// set images' left and top
if(dragImg!=null){
dragImg.style.left=insideX-(parseInt(dragImg.style.width)*0.5)+'px';
dragImg.style.top=insideY-(parseInt(dragImg.style.height)*0.5)+'px';
}
}
function checkAnswer(category){ // CHECK
if(checkImg!=null){
// .........if-statement: if checkImg id is same as category
// ..give it a GREEN border to show CORRECT
// ..........else-statement:
//..make the border RED for WRONG
}
}
function attach2(img){ // ATTACH
checkImg=null;
dragImg=img;
dragImg.style.border='solid 2px yellow';
}
function letGo2(){ // LETGO
checkImg=dragImg;
dragImg=null;
}
</script>
<p style="font-size:20px ; color:purple">
Make your own Check the category game.
<ul ><li>Write the CheckAnswer()(29,33)</li>
<li>Change the images (89) </li>
<li>change the category names in the DIV's id (69,77)</li>
<li>also in the <u>name attribute</u> of the pictures(93).</li></ul>
</p>
<div id="div111"
style="position:relative ; height:280px; width:550px; border:solid 1px blue"
onmousemove=" dragThisPict(event) ">
<div id="amphibians"
style=" border:solid 1px blue;
font-size:30px;color:blue; width:250px;height:150px;
position:absolute; left:10px; bottom:120px"
onclick=" checkAnswer(this.id) ">
click on amphibians
</div>
<div id="reptiles"
style="font-size:30px; border:solid 1px green;
color:green; width:250px;height:150px;
position:absolute; left:270px; bottom:120px"
onclick=" checkAnswer(this.id) ">
click on reptiles
</div>
<img id="newt" title=" red spotted newt "
name="amphibians"
onmousedown=" attach2(this) "
onmouseup=" letGo2() "
src="http://kidscanjavascript.com/pics/redspottednewt.jpg"
style="width:100px ; height:100px; left:10px;bottom:10px ;position:absolute" />
<img id="cobra" title=" king cobra "
name="reptiles"
onmousedown=" attach2(this) "
onmouseup=" letGo2() "
src="http://kidscanjavascript.com/pics/king-cobra-snake.jpg"
style="width:100px ; height:100px; left:130px;bottom:10px ;position:absolute" />
<img id="iguana" title=" iguana male " name="reptiles"
onmousedown=" attach2(this) "
onmouseup=" letGo2() "
src="http://kidscanjavascript.com/pics/green_iguana.jpg"
style="width:100px ; height:100px; left:250px;bottom:10px ;position:absolute" />
<img id="axolotl" title=" axolotl " name="amphibians"
onmousedown=" attach2(this) "
onmouseup=" letGo2() "
src="http://kidscanjavascript.com/pics/axolotl.jpg"
style="width:100px ; height:100px; left:370px;bottom:10px ;position:absolute" />
