Index: third_party/polymer/components/core-drag-drop/demo.html |
diff --git a/third_party/polymer/components/core-drag-drop/demo.html b/third_party/polymer/components/core-drag-drop/demo.html |
deleted file mode 100644 |
index 387430e65c7d960d23273600b78f6b0b721fa525..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components/core-drag-drop/demo.html |
+++ /dev/null |
@@ -1,93 +0,0 @@ |
-<!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> |