OLD | NEW |
1 #!mojo mojo:sky_viewer | 1 #!mojo mojo:sky_viewer |
2 <sky> | 2 <sky> |
3 <style> | 3 <style> |
4 dot { | 4 dot { |
5 position: absolute; | 5 position: absolute; |
6 height: 100px; | 6 height: 100px; |
7 width: 100px; | 7 width: 100px; |
8 background-color: #00FF00; | 8 background-color: #00FF00; |
9 } | 9 } |
10 </style> | 10 </style> |
11 <dot /> | 11 <dot /> |
12 <log>Ready</log> | 12 <log>Ready</log> |
13 <script> | 13 <script> |
14 import "dart:sky"; | 14 import "dart:sky"; |
15 | 15 |
16 final Element dot = document.querySelector("dot"); | 16 final Element dot = document.querySelector("dot"); |
17 | 17 |
18 void moveDot(event) { | 18 void moveDot(event) { |
19 double x = event.x; | 19 double x = event.x; |
20 double y = event.y; | 20 double y = event.y; |
21 | 21 |
22 dot.style.setProperty("transform", "translate(${x-50}px,${y-50}px)"); | 22 dot.style["transform"] = "translate(${x-50}px,${y-50}px)"; |
23 } | 23 } |
24 | 24 |
25 void main() { | 25 void main() { |
26 document.addEventListener("pointerdown", moveDot); | 26 document.addEventListener("pointerdown", moveDot); |
27 document.addEventListener("pointermove", moveDot); | 27 document.addEventListener("pointermove", moveDot); |
28 document.addEventListener("pointerup", moveDot); | 28 document.addEventListener("pointerup", moveDot); |
29 document.addEventListener("pointercancel", moveDot); | 29 document.addEventListener("pointercancel", moveDot); |
30 } | 30 } |
31 </script> | 31 </script> |
32 </sky> | 32 </sky> |
OLD | NEW |