Merge pull request #12 from PuruVJ/fix/simultaneous-event-firing

1.5.1 - Fix simultaneous event firing
PuruVJ · Oct 11, 2021 · e5ae705 · e5ae705
2 parents d36ac4b + 7e47e63
commit e5ae705
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/demo/src/routes/index.svelte b/demo/src/routes/index.svelte
@@ -143,6 +143,36 @@
   <div class="cancel-2">Cancel 2</div>
 </div>
 
+<div
+  use:draggable={options}
+  on:svelte-drag:start={console.log}
+  on:svelte-drag:end={console.log}
+  class="box"
+>
+  hello
+
+  <div class="handle">Le handel</div>
+  <div class="cancel">Cancel</div>
+
+  <div class="handle-2">Le handel 2</div>
+  <div class="cancel-2">Cancel 2</div>
+</div>
+
+<div
+  use:draggable={options}
+  on:svelte-drag:start={console.log}
+  on:svelte-drag:end={console.log}
+  class="box"
+>
+  hello
+
+  <div class="handle">Le handel</div>
+  <div class="cancel">Cancel</div>
+
+  <div class="handle-2">Le handel 2</div>
+  <div class="cancel-2">Cancel 2</div>
+</div>
+
 <style>
   :global(body) {
     background-color: rgb(26, 32, 39);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-drag",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Svelte port of react-draggable",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

diff --git a/src/draggable.d.ts b/src/draggable.d.ts
@@ -1,5 +1,5 @@
 export declare namespace svelte.JSX {
-  interface HTMLAttributes<T> {
+  interface HTMLAttributes {
     'onsvelte-drag:start'?: (e: CustomEvent<null>) => void;
     'onsvelte-drag:end'?: (e: CustomEvent<null>) => void;
     'onsvelte-drag'?: (e: CustomEvent<{ offsetX: number; offsetY: number }>) => void;

diff --git a/src/index.ts b/src/index.ts
@@ -287,23 +287,15 @@ export const draggable = (node: HTMLElement, options: SvelteDragOptions = {}) =>
     );
   }
 
-  function setupListeners(
-    dragStart: (e: TouchEvent | MouseEvent) => void,
-    dragEnd: () => void,
-    drag: (e: TouchEvent | MouseEvent) => void
-  ) {
-    const listen = addEventListener;
-
-    listen('touchstart', dragStart, false);
-    listen('touchend', dragEnd, false);
-    listen('touchmove', drag, false);
-
-    listen('mousedown', dragStart, false);
-    listen('mouseup', dragEnd, false);
-    listen('mousemove', drag, false);
-  }
+  const listen = addEventListener;
+
+  listen('touchstart', dragStart, false);
+  listen('touchend', dragEnd, false);
+  listen('touchmove', drag, false);
 
-  setupListeners(dragStart, dragEnd, drag);
+  listen('mousedown', dragStart, false);
+  listen('mouseup', dragEnd, false);
+  listen('mousemove', drag, false);
 
   // On mobile, touch can become extremely janky without it
   node.style.touchAction = 'none';
@@ -359,9 +351,12 @@ export const draggable = (node: HTMLElement, options: SvelteDragOptions = {}) =>
     }
   }
 
-  function dragEnd() {
+  function dragEnd(e: MouseEvent | TouchEvent) {
     if (disabled) return;
 
+    // required, or the event will be fired for every single draggable instance present
+    if (!node.contains(e.target as HTMLElement)) return;
+
     // Apply class defaultClassDragged
     node.classList.remove(defaultClassDragging);
     node.classList.add(defaultClassDragged);