EaselJS/tutorials/Mouse Interaction/drag.html at 4463d7da329e375de8a91610554b2cd2b62a021f · CreateJS/EaselJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html>
<head>
    <title>EaselJS demo: Dragging</title>
    <link href="../_shared/demo.css" rel="stylesheet" type="text/css">
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script>
        var stage, output;

        function init() {
            stage = new createjs.Stage("demoCanvas");
            stage.enableMouseOver(30); // enable mouse over so we can control mouse cursor

            // 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.cursor = "move";
            dragger.addChild(circle, label);
            stage.addChild(dragger);


            dragger.on("mousedown", function(evt) {
                // note where the drag initiated on the shape
                evt.currentTarget.dragOffset = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
            });

            dragger.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX - evt.currentTarget.dragOffset.x;
                evt.currentTarget.y = evt.stageY - evt.currentTarget.dragOffset.y;
                // make sure to redraw the stage to show the change:
                stage.update();
            });

            stage.update();
        }
    </script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="200">
        alternate content
    </canvas>
</body>
</html>