Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drag and drop on canvas - function related query

    Dear all

    I came across the following very simple code for dragging a square around using javascript. It is drawn on the html5 canvas. Despite being very simple it has certainly exposed some gaps in my pretty flakey javascript knowledge. I am generally ok with the idea of drag and drop (i.e. start drag on mouse click, stop drag on mouse release) but my questions are as follows:

    (1) I cannot see where the variable e is defined, yet it is used all the time.

    (2) In the init funciton at the bottom, an onmousedown listener seems to be attached to the canvas. However it equals the function myDown, but myDown doesn't have parentheses after it. So the myDown function is not actually going to be exectuted. So what is it doing instead?

    Thanks in advance. I have tried to research this myself but haven't had any success yet.

    Matt



    Code:
    <!doctype html> 
    <html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Canvas Drag and Drop Test</title> 
    </head> 
    <body> 
    <section> 
    
    <div> 
    <canvas id="canvas" width="400" height="300"> 
    This text is displayed if your browser does not support HTML5 Canvas. 
    </canvas> 
    </div> 
    
    <script type="text/javascript"> 
    
    var canvas; 
    var ctx; 
    var x = 75; 
    var y = 50; 
    var dx = 5; 
    var dy = 3; 
    var WIDTH = 400; 
    var HEIGHT = 300; 
    var dragok = false; 
    
    function rect(x,y,w,h) { 
     ctx.beginPath(); 
     ctx.rect(x,y,w,h); 
     ctx.closePath(); 
     ctx.fill(); 
    } 
    
    function clear() { 
     ctx.clearRect(0, 0, WIDTH, HEIGHT); 
    } 
    
    function init() { 
     canvas = document.getElementById("canvas"); 
     ctx = canvas.getContext("2d"); 
     return setInterval(draw, 10); 
    } 
    
    function draw() { 
     clear(); 
     ctx.fillStyle = "#FAF7F8"; 
     rect(0,0,WIDTH,HEIGHT); 
     ctx.fillStyle = "#444444"; 
     rect(x - 15, y - 15, 30, 30); 
    } 
    
    function myMove(e){ 
     if (dragok){ 
      x = e.pageX - canvas.offsetLeft; 
      y = e.pageY - canvas.offsetTop; 
     } 
    } 
    
    function myDown(e){ 
     if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
     e.pageY > y -15 + canvas.offsetTop){ 
      x = e.pageX - canvas.offsetLeft; 
      y = e.pageY - canvas.offsetTop; 
      dragok = true; 
      canvas.onmousemove = myMove; 
     } 
    } 
    
    function myUp(){ 
     dragok = false; 
     canvas.onmousemove = null; 
    } 
    
    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp; 
    
    </script> 
    
    </section> 
    </body> 
    </html>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,032
    Thanks
    15
    Thanked 240 Times in 240 Posts
    e === event

    The following is a standard way of attaching events that's been used for years.

    canvas.onmouseup = myUp;

    var divx=document.getElementById("X");
    divx.onclick = doThis;

    If you added parenthesis it would call the function, which is not desired here.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Here's an example that works for IE and other browsers

    http://jsdo.it/canvastag/gDaC

    e is the var for the window.event
    The window.event gets sent when you run functions like .onclick, .onmouse....etc


    Code:
     //Global mouse object
                                           var Mouse={ x : 0,
                                                       y : 0
                                                      }
                      //Global mouse position 
    document.onmousemove=function(e){ 
                                                              e = !e ? window.event : e ; 
                                               Mouse={ x : (e.pageX||e.clientX),
                                                       y : (e.pageY||e.clientY)
                                                      } 
                 }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •