| 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 |