topical media & game development

talk show tell print

mobile-graphic-easel-tutorials-Mouse-Interaction-drag.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS demo: Dragging</title>
          <link href="../shared/demo.css" rel="stylesheet" type="text/css">
          <script src="../../lib/easeljs-0.6.0.min.js"></script>
          <script>
                  var stage, output;
                  
                  function init() {
                          stage = new createjs.Stage("demoCanvas");
                          
                          // this lets our drag continue to track the mouse even when it leaves the canvas:
                          // play with commenting this out to see the difference.
                          stage.mouseMoveOutside = true; 
                          
                          var circle = new createjs.Shape();
                          circle.graphics.beginFill("red").drawCircle(0, 0, 50);
                          
                          var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
                          label.textAlign = "center";
                          label.y = -7;
                          
                          var dragger = new createjs.Container();
                          dragger.x = dragger.y = 100;
                          dragger.addChild(circle, label);
                          stage.addChild(dragger);
                          
                          dragger.addEventListener("mousedown", function(evt) {
                                  var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
                   
                                  // add a handler to the event object's onMouseMove callback
                                  // this will be active until the user releases the mouse button:
                                  evt.addEventListener("mousemove",function(ev) {
                                      ev.target.x = ev.stageX+offset.x;
                                          ev.target.y = ev.stageY+offset.y;
                                          stage.update();   
                                  });
                          });
                          
                          stage.update();
                  }
          </script>
  </head>
  <body onLoad="init();">
          <canvas id="demoCanvas" width="500" height="200">
                  alternate content
          </canvas>
  </body>
  </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.