2 files changed, 79 insertions, 0 deletions
diff --git a/click1/demo.js b/click1/demo.js
new file mode 100644
index 0000000..d9696b1
--- /dev/null
+++ b/click1/demo.js
@@ -0,0 +1,47 @@
+var box;
+var boxX = 0, boxY = 0;
+
+document.addEventListener( 'DOMContentLoaded', init, false );
+
+function init() {
+  box = document.querySelector('#box');
+
+  box.addEventListener( 'mousedown', onMousedown, false );
+  box.addEventListener( 'click', onClick, false );
+}
+
+// ----- mouse ----- //
+
+var dragStartX, dragStartY;
+var dragStartBoxX, dragStartBoxY;
+var mouseDownEvent;
+
+function onMousedown( event ) {
+  // event.preventDefault();
+  dragStartX = event.pageX;
+  dragStartY = event.pageY;
+  // position of box when drag started
+  dragStartBoxX = boxX;
+  dragStartBoxY = boxY;
+
+  window.addEventListener( 'mousemove', onMousemove, false );
+  window.addEventListener( 'mouseup', onMouseup, false );
+}
+
+function onMousemove( event ) {
+  boxX = dragStartBoxX + ( event.pageX - dragStartX );
+  boxY = dragStartBoxY + ( event.pageY - dragStartY );
+  box.style.left = boxX + 'px';
+  box.style.top = boxY + 'px';
+}
+
+function onMouseup() {
+  window.removeEventListener( 'mousemove', onMousemove, false );
+  window.removeEventListener( 'mouseup', onMouseup, false );
+}
+
+// ----- click ----- //
+
+function onClick() {
+  console.log('click');
+}
diff --git a/click1/index.html b/click1/index.html
new file mode 100644
index 0000000..e1e96a4
--- /dev/null
+++ b/click1/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>click1</title>
+
+  <style>
+    * { margin: 0; padding: 0; }
+
+    #box {
+      width: 160px;
+      height: 160px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: #0AE;
+      border-radius: 5px;
+    }
+  </style>
+
+</head>
+<body>
+
+  <h1>click1</h1>
+
+<div id="box"></div>
+
+<script src="demo.js"></script>
+
+</body>
+</html>