EaselJS/examples/DragAndDrop.html at master · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Rollovers and Drag & Drop</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>

<script id="editable">
	var canvas, stage;

	var mouseTarget;	// the display object currently under the mouse, or being dragged
	var dragStarted;	// indicates whether we are currently in a drag operation
	var offset;
	var update = true;

	function init() {
		examples.showDistractor();
		// create stage and point it to the canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// enable touch interactions if supported on the current device:
		createjs.Touch.enable(stage);

		// enabled mouse over / out events
		stage.enableMouseOver(10);
		stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas

		// load the source image:
		var image = new Image();
		image.src = "../_assets/art/daisy.png";
		image.onload = handleImageLoad;
	}

	function stop() {
		createjs.Ticker.removeEventListener("tick", tick);
	}

	function handleImageLoad(event) {
		var image = event.target;
		var bitmap;
		var container = new createjs.Container();
		stage.addChild(container);

		// create and populate the screen with random daisies:
		for (var i = 0; i < 100; i++) {
			bitmap = new createjs.Bitmap(image);
			container.addChild(bitmap);
			bitmap.x = canvas.width * Math.random() | 0;
			bitmap.y = canvas.height * Math.random() | 0;
			bitmap.rotation = 360 * Math.random() | 0;
			bitmap.regX = bitmap.image.width / 2 | 0;
			bitmap.regY = bitmap.image.height / 2 | 0;
            bitmap.scale = bitmap.originalScale = Math.random() * 0.4 + 0.6;
            bitmap.name = "bmp_" + i;
			bitmap.cursor = "pointer";

			// using "on" binds the listener to the scope of the currentTarget by default
			// in this case that means it executes in the scope of the button.
			bitmap.on("mousedown", function (evt) {
				this.parent.addChild(this);
				this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
			});

			// the pressmove event is dispatched when the mouse moves after a mousedown on the target until the mouse is released.
			bitmap.on("pressmove", function (evt) {
				this.x = evt.stageX + this.offset.x;
				this.y = evt.stageY + this.offset.y;
				// indicate that the stage should be updated on the next tick:
				update = true;
			});

			bitmap.on("rollover", function (evt) {
				this.scale = this.originalScale * 1.2;
				update = true;
			});

			bitmap.on("rollout", function (evt) {
				this.scale = this.originalScale;
				update = true;
			});

		}

		examples.hideDistractor();
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		// this set makes it so the stage only re-renders when an event handler indicates a change has happened.
		if (update) {
			update = false; // only update once
			stage.update(event);
		}
	}
</script>

</head>

<body onload="init();">
<header class="EaselJS">
	<h1>Drag &amp; Drop</h1>

	<p>Example of implementing drag &amp; drop using mouse events such as <code>mousedown</code>,
		<code>mouseup</code>, and <code>pressmove</code>. Some browsers do not
		allow access to pixel data when running local files, and may throw a
		security error or not work unless the content is running on a server.
	</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>