OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
6 Code distributed by Google as part of the polymer project is also | |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
8 --> | |
9 | |
10 <link rel="import" href="../polymer/polymer.html"> | |
11 | |
12 <style> | |
13 core-drag-avatar { | |
14 position: fixed; | |
15 left: 0; | |
16 top: 0; | |
17 display: block; | |
18 pointer-events: none; | |
19 } | |
20 </style> | |
21 | |
22 <!-- | |
23 @group Polymer Core Elements | |
24 @element core-drag-drop | |
25 @homepage github.io | |
26 --> | |
27 | |
28 <polymer-element name="core-drag-drop"> | |
29 <script> | |
30 (function() { | |
31 var avatar; | |
32 | |
33 Polymer('core-drag-drop', { | |
34 | |
35 observe: { | |
36 'x y': 'coordinatesChanged' | |
37 }, | |
38 | |
39 ready: function() { | |
40 if (!avatar) { | |
41 avatar = document.createElement('core-drag-avatar'); | |
42 document.body.appendChild(avatar); | |
43 } | |
44 this.avatar = avatar; | |
45 this.dragging = false; | |
46 }, | |
47 | |
48 draggingChanged: function() { | |
49 this.avatar.style.display = this.dragging ? '' : 'none'; | |
50 }, | |
51 | |
52 coordinatesChanged: function() { | |
53 var x = this.x, y = this.y; | |
54 this.avatar.style.transform = | |
55 this.avatar.style.webkitTransform = | |
56 'translate(' + x + 'px, ' + y + 'px)'; | |
57 }, | |
58 | |
59 attached: function() { | |
60 var listen = function(event, handler) { | |
61 Polymer.addEventListener(this.parentNode, event, this[handler].bind(this
)); | |
62 }.bind(this); | |
63 // | |
64 listen('trackstart', 'trackStart'); | |
65 listen('track', 'track'); | |
66 listen('trackend', 'trackEnd'); | |
67 // | |
68 var host = this.parentNode.host || this.parentNode; | |
69 host.style.cssText += '; user-select: none; -webkit-user-select: none; -mo
z-user-select: none; -ms-user-select: none;'; | |
70 }, | |
71 | |
72 trackStart: function(event) { | |
73 this.avatar.style.cssText = ''; | |
74 this.dragInfo = { | |
75 event: event, | |
76 avatar: this.avatar | |
77 }; | |
78 this.fire('drag-start', this.dragInfo); | |
79 // flaw #1: what if user doesn't need `drag()`? | |
80 this.dragging = Boolean(this.dragInfo.drag); | |
81 }, | |
82 | |
83 track: function(event) { | |
84 if (this.dragging) { | |
85 this.x = event.pageX; | |
86 this.y = event.pageY; | |
87 this.dragInfo.event = event; | |
88 this.dragInfo.p = {x : this.x, y: this.y}; | |
89 this.dragInfo.drag(this.dragInfo); | |
90 } | |
91 }, | |
92 | |
93 trackEnd: function(event) { | |
94 if (this.dragging) { | |
95 this.dragging = false; | |
96 if (this.dragInfo.drop) { | |
97 this.dragInfo.framed = this.framed(event.relatedTarget); | |
98 this.dragInfo.event = event; | |
99 this.dragInfo.drop(this.dragInfo); | |
100 } | |
101 } | |
102 this.dragInfo = null; | |
103 }, | |
104 | |
105 framed: function(node) { | |
106 var local = node.getBoundingClientRect(); | |
107 return {x: this.x - local.left, y: this.y - local.top}; | |
108 } | |
109 | |
110 }); | |
111 | |
112 })(); | |
113 </script> | |
114 </polymer-element> | |
OLD | NEW |