Index: third_party/polymer/components-chromium/core-drag-drop/demo.html |
diff --git a/third_party/polymer/components-chromium/core-drag-drop/demo.html b/third_party/polymer/components-chromium/core-drag-drop/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..387430e65c7d960d23273600b78f6b0b721fa525 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-drag-drop/demo.html |
@@ -0,0 +1,93 @@ |
+<!doctype html> |
+<html lang="en"> |
+<head> |
+ |
+ <meta charset="utf-8"> |
+ <meta name="viewport" content="width=device-width, user-scalable=no"> |
+ |
+ <title>Core Drag Drop</title> |
+ |
+ <script src="../platform/platform.js"></script> |
+ |
+ <link rel="import" href="core-drag-drop.html"> |
+ |
+ <style> |
+ |
+ html { |
+ font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif; |
+ } |
+ |
+ body { |
+ height: 100vh; |
+ margin: 0; |
+ -webkit-user-select: none; |
+ -moz-user-select: none; |
+ -ms-user-select: none; |
+ } |
+ |
+ .box { |
+ display: inline-block; |
+ width: 100px; |
+ height: 100px; |
+ margin: 16px; |
+ } |
+ |
+ .dropped { |
+ position: absolute; |
+ border: 1px solid black; |
+ width: 5px; |
+ height: 5px; |
+ } |
+ |
+ </style> |
+ |
+</head> |
+<body unresolved> |
+ |
+ <div style="border: 1px dotted silver;"> |
+ |
+ <core-drag-drop></core-drag-drop> |
+ |
+ <div class="box" style="background-color: lightblue;" draggable="false"></div> |
+ |
+ <div class="box" style="background-color: orange;" draggable="false"></div> |
+ |
+ <div class="box" style="background-color: lightgreen;" draggable="false"></div> |
+ |
+ <div id="hello">Hello World</div> |
+ |
+ </div> |
+ |
+ <br><br><br><br><br><br> |
+ |
+ <div id="drop" class="box" style="border: 3px solid silver; position: relative; width: 300px; height: 300px;" draggable="false"></div> |
+ |
+ <script> |
+ addEventListener('drag-start', function(e) { |
+ var dragInfo = e.detail; |
+ // flaw #2: e vs dragInfo.event |
+ var color = dragInfo.event.target.style.backgroundColor; |
+ dragInfo.avatar.style.cssText = 'border: 3px solid ' + color + '; width: 32px; height: 32px; border-radius: 32px; background-color: whitesmoke'; |
+ e.detail.avatar.appendChild(document.querySelector('#hello')); |
+ dragInfo.drag = function() {}; |
+ dragInfo.drop = drop; |
+ }); |
+ // |
+ function drop(dragInfo) { |
+ var color = dragInfo.avatar.style.borderColor; |
+ var dropTarget = dragInfo.event.relatedTarget; |
+ if (color && dropTarget.id === 'drop') { |
+ var f = dragInfo.framed; |
+ var d = document.createElement('div'); |
+ d.className = 'dropped'; |
+ d.style.left = f.x - 4 + 'px'; |
+ d.style.top = f.y - 4 + 'px'; |
+ d.style.backgroundColor = color; |
+ dropTarget.appendChild(d); |
+ dropTarget.style.backgroundColor = color; |
+ } |
+ } |
+ </script> |
+ |
+</body> |
+</html> |