| 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
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..387430e65c7d960d23273600b78f6b0b721fa525
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/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>
|
|
|
Chromium Code Reviews
Issue 582873003:
Polymer elements added to third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master