Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(575)

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

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698