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

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html lang="en">
  12 <head>
  13
  14   <meta charset="utf-8">
  15   <meta name="viewport" content="width=device-width, user-scalable=no">
  16
  17   <title>Core Drag Drop</title>
  18
  19   <script src="../webcomponentsjs/webcomponents.js"></script>
  20
  21   <link rel="import" href="core-drag-drop.html">
  22
  23   <style>
  24
  25     html {
  26       font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
  27     }
  28
  29     body {
  30       height: 100vh;
  31       margin: 0;
  32       -webkit-user-select: none;
  33       -moz-user-select: none;
  34       -ms-user-select: none;
  35     }
  36
  37     .box {
  38       display: inline-block;
  39       width: 100px;
  40       height: 100px;
  41       margin: 16px;
  42     }
  43
  44     .dropped {
  45       position: absolute;
  46       border: 1px solid black;
  47       width: 5px;
  48       height: 5px;
  49     }
  50
  51   </style>
  52
  53 </head>
  54 <body unresolved>
  55
  56   <div style="border: 1px dotted silver;">
  57
  58     <core-drag-drop></core-drag-drop>
  59
  60     <div class="box" style="background-color: lightblue;" draggable="false"></div>
  61
  62     <div class="box" style="background-color: orange;" draggable="false"></div>
  63
  64     <div class="box" style="background-color: lightgreen;" draggable="false"></div>
  65
  66     <div id="hello">Hello World</div>
  67
  68   </div>
  69
  70   <br><br><br><br><br><br>
  71
  72   <div id="drop" class="box" style="border: 3px solid silver; position: relative; width: 300px; height: 300px;" draggable="false"></div>
  73
  74   <script>
  75     addEventListener('drag-start', function(e) {
  76       var dragInfo = e.detail;
  77       // flaw #2: e vs dragInfo.event
  78       var color = dragInfo.event.target.style.backgroundColor;
  79       dragInfo.avatar.style.cssText = 'border: 3px solid ' + color + '; width: 32px; height: 32px; border-radius: 32px; background-color: whitesmoke';
  80       e.detail.avatar.appendChild(document.querySelector('#hello'));
  81       dragInfo.drag = function() {};
  82       dragInfo.drop = drop;
  83     });
  84     //
  85     function drop(dragInfo) {
  86       var color = dragInfo.avatar.style.borderColor;
  87       var dropTarget = dragInfo.event.relatedTarget;
  88       if (color && dropTarget.id === 'drop') {
  89         var f = dragInfo.framed;
  90         var d = document.createElement('div');
  91         d.className = 'dropped';
  92         d.style.left = f.x - 4 + 'px';
  93         d.style.top = f.y - 4 + 'px';
  94         d.style.backgroundColor = color;
  95         dropTarget.appendChild(d);
  96         dropTarget.style.backgroundColor = color;
  97       }
  98     }
  99   </script>
 100
 101 </body>
 102 </html>