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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, user-scalable=no">
   7
   8   <title>Core Drag Drop</title>
   9
  10   <script src="../platform/platform.js"></script>
  11
  12   <link rel="import" href="core-drag-drop.html">
  13
  14   <style>
  15
  16     html {
  17       font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
  18     }
  19
  20     body {
  21       height: 100vh;
  22       margin: 0;
  23       -webkit-user-select: none;
  24       -moz-user-select: none;
  25       -ms-user-select: none;
  26     }
  27
  28     .box {
  29       display: inline-block;
  30       width: 100px;
  31       height: 100px;
  32       margin: 16px;
  33     }
  34
  35     .dropped {
  36       position: absolute;
  37       border: 1px solid black;
  38       width: 5px;
  39       height: 5px;
  40     }
  41
  42   </style>
  43
  44 </head>
  45 <body unresolved>
  46
  47   <div style="border: 1px dotted silver;">
  48
  49     <core-drag-drop></core-drag-drop>
  50
  51     <div class="box" style="background-color: lightblue;" draggable="false"></div>
  52
  53     <div class="box" style="background-color: orange;" draggable="false"></div>
  54
  55     <div class="box" style="background-color: lightgreen;" draggable="false"></div>
  56
  57     <div id="hello">Hello World</div>
  58
  59   </div>
  60
  61   <br><br><br><br><br><br>
  62
  63   <div id="drop" class="box" style="border: 3px solid silver; position: relative; width: 300px; height: 300px;" draggable="false"></div>
  64
  65   <script>
  66     addEventListener('drag-start', function(e) {
  67       var dragInfo = e.detail;
  68       // flaw #2: e vs dragInfo.event
  69       var color = dragInfo.event.target.style.backgroundColor;
  70       dragInfo.avatar.style.cssText = 'border: 3px solid ' + color + '; width: 32px; height: 32px; border-radius: 32px; background-color: whitesmoke';
  71       e.detail.avatar.appendChild(document.querySelector('#hello'));
  72       dragInfo.drag = function() {};
  73       dragInfo.drop = drop;
  74     });
  75     //
  76     function drop(dragInfo) {
  77       var color = dragInfo.avatar.style.borderColor;
  78       var dropTarget = dragInfo.event.relatedTarget;
  79       if (color && dropTarget.id === 'drop') {
  80         var f = dragInfo.framed;
  81         var d = document.createElement('div');
  82         d.className = 'dropped';
  83         d.style.left = f.x - 4 + 'px';
  84         d.style.top = f.y - 4 + 'px';
  85         d.style.backgroundColor = color;
  86         dropTarget.appendChild(d);
  87         dropTarget.style.backgroundColor = color;
  88       }
  89     }
  90   </script>
  91
  92 </body>
  93 </html>