Kids

Can

JavaScript

<-----Back        Next --->

DragNDrop

Get Mouse Coordinates

example1:

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>



GetBoundingClientRect()

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>




Attach() and LetGo()

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.

example2:

Drag n Drop a picture in the right category, then click the field to check!

click on amphibians
click on reptiles


DragNDrop functions
 function 
 attach2  
 ( 
 img 
 ) { 


 dragImg 
 = 
 img 
 ; 


 checkImg 
 = 
 null 
 ; 
 } 

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;



Make a Game

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




<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email