completed challenge 27

rohitkrai03 · rohitkrai03 · commit 901c873a0ec8 · 2017-07-03T22:20:50.000+05:30
diff --git a/27 - Click and Drag/index.html b/27 - Click and Drag/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Click and Drag</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
   <div class="items">
     <div class="item item1">01</div>
@@ -33,9 +35,36 @@
     <div class="item item24">24</div>
     <div class="item item25">25</div>
   </div>
+  <script>
+    const slider = document.querySelector('.items');
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    slider.addEventListener('mousedown', (e) => {
+      isDown = true;
+      slider.classList.add('active');
+      startX = e.pageX - slider.offsetLeft;
+      scrollLeft = slider.scrollLeft;
+    });
+    slider.addEventListener('mouseleave', () => {
+      isDown = false;
+      slider.classList.remove('active');
+
+    });
+    slider.addEventListener('mouseup', () => {
+      isDown = false;
+      slider.classList.remove('active');
 
-<script>
-</script>
+    });
+    slider.addEventListener('mousemove', (e) => {
+      if (!isDown) return;
+      e.preventDefault();
+      x = e.pageX - slider.offsetLeft;
+      walk = x - startX;
+      slider.scrollLeft = scrollLeft - walk;
+    });
+  </script>
+</body>
 
-  </body>
 </html>
