Merge pull request #23 from Applelo/drag-fixes

fix click occur after a drag

docs/demo/drag.md

@@ -6,24 +6,40 @@
   import { onMounted } from 'vue'
 
   onMounted(() => {
-    const drag = new Drag('.c-drag')
+    const dragBasic = new Drag('#drag-basic')
+    const dragBreadcrumb = new Drag('#drag-breadcrumb')
   })
 </script>
 <style>
-.c-drag {
+/* basic */
+#drag-basic {
   height: 250px;
 }
 
-.c-drag > div {
+#drag-basic > div {
   width: 200%;
 }
 
-.c-drag p:first-child {
+#drag-basic p:first-child {
   width: 300px;
 }
+
+/* breadcrumb */
+#drag-breadcrumb ul {
+  list-style: none;
+  margin: 2rem 0 0;
+  padding: 1rem 0;
+  display:flex;
+  gap: 1rem;
+}
+
+#drag-breadcrumb li {
+  margin: 0;
+  flex-shrink: 0;
+}
 </style>
 <div style="margin-top: 2rem;">
-  <div class="c-drag">
+  <div class="c-drag" id="drag-basic">
     <div>
       <p>
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
@@ -33,4 +49,13 @@
       </p>
     </div>
   </div>
+
+  <div class="c-drag" id="drag-breadcrumb">
+    <ul>
+      <li><a target="_blank" href="https://www.alexandregaliay.com/">Lorem ipsum Alexgolia</a></li>
+      <li><a href="#2">Mollitia facere</a></li>
+      <li><a target="_blank" href="https://camilles-travels.com/">Camille san et qui labore reprehenderit</a></li>
+      <li><a href="#4">Mollitia facere</a></li>
+    </ul>
+  </div>
 </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@compotes/root",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": "true",
   "packageManager": "pnpm@8.6.0",
   "description": "Components library focused on accessibility/customization",

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "compotes",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "packageManager": "pnpm@8.9.2",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",

packages/core/src/assets/css/drag.css

@@ -12,4 +12,4 @@
 
 .c-drag--dragging * {
   user-select: none;
-}
+}

packages/core/src/components/drag.ts

@@ -17,6 +17,7 @@ export default class Drag extends Parent {
   private startY = 0
   private scrollLeft = 0
   private scrollTop = 0
+  private hasMoved = false
 
   private resizeObserver?: ResizeObserver
 
@@ -65,6 +66,21 @@ export default class Drag extends Parent {
       event: 'mousedown',
       el: this.el,
     })
+
+    this.registerEvent({
+      id: 'handleClick',
+      function: this.blockClick.bind(this),
+      event: 'click',
+      el: this.el,
+    })
+  }
+
+  private blockClick(e: Event) {
+    if (!this.hasMoved)
+      return
+
+    e.preventDefault()
+    this.hasMoved = false
   }
 
   private handleDragStart(e: MouseEvent) {
@@ -88,12 +104,19 @@ export default class Drag extends Parent {
   private handleDragMove(e: MouseEvent) {
     if (!this.isDown)
       return
+    e.preventDefault()
+
     const x = e.pageX - this.el.offsetLeft - this.startX
     const y = e.pageY - this.el.offsetTop - this.startY
 
-    e.preventDefault()
-    this.el.scrollLeft = this.scrollLeft - x
-    this.el.scrollTop = this.scrollTop - y
+    const newX = this.scrollLeft - x
+    const newY = this.scrollTop - y
+
+    if (this.el.scrollLeft !== newX || this.el.scrollTop !== newY)
+      this.hasMoved = true
+
+    this.el.scrollLeft = newX
+    this.el.scrollTop = newY
   }
 
   public get isDraggable() {