third_party/polymer/components/core-drag-drop/core-drag-drop.html

   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.github.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/CONTRIBUTORS.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/PATENTS.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; -moz-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>