remy · NahuelKliphan · Aug 2, 2019
diff --git a/canvas-grad.html b/canvas-grad.html
@@ -1,77 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-<meta charset=utf-8 />
-<title>Canvas Gradient</title>
-<style>
-body {
-  background: #000;
-}
-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-</style>
+  <meta charset=utf-8 />
+  <title>Canvas Gradient</title>
+  <link rel="stylesheet" href="css/canvas-grad.css">
 </head>
+
 <body>
-<canvas height="600" width="600"></canvas>
-<script>
-var canvas = document.getElementsByTagName('canvas')[0],
-    ctx = null,
-    grad = null,
-    body = document.getElementsByTagName('body')[0],
-    color = 255;
-    
-if (canvas.getContext('2d')) {
-  ctx = canvas.getContext('2d');
-  ctx.clearRect(0, 0, 600, 600);
-  ctx.save();
-  // Create radial gradient
-  grad = ctx.createRadialGradient(0,0,0,0,0,600); 
-  grad.addColorStop(0, '#000');
-  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
+  <canvas height="600" width="600"></canvas>
+  <script>
+    var canvas = document.getElementsByTagName('canvas')[0],
+      ctx = null,
+      grad = null,
+      body = document.getElementsByTagName('body')[0],
+      color = 255;
+
+    if (canvas.getContext('2d')) {
+      ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, 600, 600);
+      ctx.save();
+      // Create radial gradient
+      grad = ctx.createRadialGradient(0, 0, 0, 0, 0, 600);
+      grad.addColorStop(0, '#000');
+      grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
 
-  // assign gradients to fill
-  ctx.fillStyle = grad;
+      // assign gradients to fill
+      ctx.fillStyle = grad;
 
-  // draw 600x600 fill
-  ctx.fillRect(0,0,600,600);
-  ctx.save();
-
-  body.onmousemove = function (event) {
-    var width = window.innerWidth, 
-        height = window.innerHeight, 
-        x = event.clientX, 
-        y = event.clientY,
-        rx = 600 * x / width,
-        ry = 600 * y / height;
-
-    var xc = ~~(256 * x / width);
-    var yc = ~~(256 * y / height);
+      // draw 600x600 fill
+      ctx.fillRect(0, 0, 600, 600);
+      ctx.save();
 
-    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
-    grad.addColorStop(0, '#000');
-    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
-    // ctx.restore();
-    ctx.fillStyle = grad;
-    ctx.fillRect(0,0,600,600);
-    // ctx.save();
-  };
-}
-</script>
-<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
-<script>
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-</script>
-<script>
-try {
-var pageTracker = _gat._getTracker("UA-1656750-18");
-pageTracker._trackPageview();
-} catch(err) {}</script>
+      body.onmousemove = function (event) {
+        var width = window.innerWidth,
+          height = window.innerHeight,
+          x = event.clientX,
+          y = event.clientY,
+          rx = 600 * x / width,
+          ry = 600 * y / height;
+
+        var xc = ~~(256 * x / width);
+        var yc = ~~(256 * y / height);
+
+        grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
+        grad.addColorStop(0, '#000');
+        grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
+        // ctx.restore();
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, 600, 600);
+        // ctx.save();
+      };
+    }
+  </script>
+  <a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;"
+      src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+  <script>
+    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+  </script>
+  <script>
+    try {
+      var pageTracker = _gat._getTracker("UA-1656750-18");
+      pageTracker._trackPageview();
+    } catch (err) { }</script>
 
 </body>
+
 </html>
diff --git a/css/canvas-grad.css b/css/canvas-grad.css
@@ -0,0 +1,11 @@
+body {
+    background: #000;
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
diff --git a/css/drag-orig.css b/css/drag-orig.css
@@ -0,0 +1,44 @@
+#boxA,
+#boxB,
+#boxC {
+    float: left;
+    width: 200px;
+    height: 200px;
+    padding: 10px;
+    margin: 10px;
+}
+
+#boxA {
+    background-color: blue;
+}
+
+#boxB {
+    background-color: green;
+}
+
+#boxC {
+    background-color: yellow;
+}
+
+#drag,
+#drag2,
+#drag3 {
+    width: 50px;
+    height: 50px;
+    padding: 5px;
+    margin: 5px;
+    -moz-user-select: none;
+}
+
+#drag {
+    background-color: red;
+}
+
+#drag2 {
+    background-color: orange;
+}
+
+#drag3 {
+    background-color: purple;
+    border: 3px brown solid;
+}
diff --git a/css/drag2.css b/css/drag2.css
@@ -0,0 +1,66 @@
+* {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    margin: 50px;
+    font-family: helvetica, arial;
+  }
+
+  li {
+    list-style: none;
+    /*  padding: 10px;*/
+  }
+
+  li a {
+    text-decoration: none;
+    color: #000;
+    margin: 10px;
+    width: 150px;
+    border: 3px dashed #999;
+    background: #eee;
+    padding: 10px;
+    cursor: pointer;
+    -moz-user-select: none;
+    /*  -webkit-user-drag: element;*/
+    -khtml-user-drag: element;
+    display: block;
+  }
+
+  *:-khtml-drag {
+    background-color: rgba(238, 238, 238, 0.5);
+  }
+
+  a:hover:after {
+    content: ' (drag me)';
+  }
+
+  li.over {
+    border-color: #333;
+    background: #ccc;
+  }
+
+  #bin {
+    background: url(/images/bin.jpg) top right no-repeat;
+    height: 250px;
+    width: 166px;
+    float: right;
+    border: 5px solid #000;
+    position: relative;
+  }
+
+  #bin.over {
+    background: url(/images/bin.jpg) top left no-repeat;
+  }
+
+  #bin p {
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    bottom: 20px;
+    width: 166px;
+    font-size: 32px;
+    color: #fff;
+    text-shadow: #000 2px 2px 2px;
+  }