The `dragMinThreshold` accepts an object for a mouse threshold.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.1.0
+ * Version  : 3.1.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.1.0
+ * Version  : 3.1.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1776,7 +1776,6 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerMove(e) {
     if (!lastEvent) {
-      clickPrevented = true;
       emit(EVENT_DRAG);
     }
     lastEvent = e;
@@ -1789,10 +1788,13 @@ function Drag(Splide2, Components2, options) {
         }
         Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
         emit(EVENT_DRAGGING);
+        clickPrevented = true;
         prevent(e);
       } else {
-        const threshold = options.dragMinThreshold || 10;
-        isDragging = !isTouchEvent(e) || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+        const diff = abs(coordOf(e) - coordOf(baseEvent));
+        let { dragMinThreshold: thresholds } = options;
+        thresholds = isObject(thresholds) ? thresholds : { mouse: 0, touch: +thresholds || 10 };
+        isDragging = diff > (isTouchEvent(e) ? thresholds.touch : thresholds.mouse);
         if (isSliderDirection()) {
           prevent(e);
         }

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.1.0
+ * Version  : 3.1.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1772,7 +1772,6 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerMove(e) {
     if (!lastEvent) {
-      clickPrevented = true;
       emit(EVENT_DRAG);
     }
     lastEvent = e;
@@ -1785,10 +1784,13 @@ function Drag(Splide2, Components2, options) {
         }
         Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
         emit(EVENT_DRAGGING);
+        clickPrevented = true;
         prevent(e);
       } else {
-        const threshold = options.dragMinThreshold || 10;
-        isDragging = !isTouchEvent(e) || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+        const diff = abs(coordOf(e) - coordOf(baseEvent));
+        let { dragMinThreshold: thresholds } = options;
+        thresholds = isObject(thresholds) ? thresholds : { mouse: 0, touch: +thresholds || 10 };
+        isDragging = diff > (isTouchEvent(e) ? thresholds.touch : thresholds.mouse);
         if (isSliderDirection()) {
           prevent(e);
         }

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.1.0
+ * Version  : 3.1.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2136,7 +2136,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function onPointerMove(e) {
       if (!lastEvent) {
-        clickPrevented = true;
         emit(EVENT_DRAG);
       }
 
@@ -2153,10 +2152,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
           Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
           emit(EVENT_DRAGGING);
+          clickPrevented = true;
           prevent(e);
         } else {
-          var threshold = options.dragMinThreshold || 10;
-          isDragging = !isTouchEvent(e) || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+          var diff = abs(coordOf(e) - coordOf(baseEvent));
+          var thresholds = options.dragMinThreshold;
+          thresholds = isObject(thresholds) ? thresholds : {
+            mouse: 0,
+            touch: +thresholds || 10
+          };
+          isDragging = diff > (isTouchEvent(e) ? thresholds.touch : thresholds.mouse);
 
           if (isSliderDirection()) {
             prevent(e);

dist/types/components/Drag/Drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAsT9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAwT9F"}

dist/types/components/Scroll/Scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scroll.d.ts","sourceRoot":"","sources":["Scroll.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAK9E;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,MAAM,CAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAC5E,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAqIlG"}
+{"version":3,"file":"Scroll.d.ts","sourceRoot":"","sources":["Scroll.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAK9E;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,MAAM,CAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAC5E,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAwIlG"}

dist/types/types/options.d.ts

@@ -273,9 +273,12 @@ export interface ResponsiveOptions {
     drag?: boolean | 'free';
     /**
      * The required distance to start moving the slider by the touch action.
-     * Other pointing devices will ignore this value.
+     * If you want to define the threshold for the mouse, provide an object.
      */
-    dragMinThreshold?: number;
+    dragMinThreshold?: number | {
+        mouse: number;
+        touch: number;
+    };
     /**
      * Determine the power of "flick". The larger number this is, the farther the slider runs.
      * Around 500 is recommended.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Drag/Drag.ts

@@ -3,7 +3,7 @@ import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, min, noop, prevent, sign } from '../../utils';
+import { abs, isObject, min, noop, prevent, sign } from '../../utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
 
 
@@ -145,7 +145,6 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    */
   function onPointerMove( e: TouchEvent | MouseEvent ): void {
     if ( ! lastEvent ) {
-      clickPrevented = true;
       emit( EVENT_DRAG );
     }
 
@@ -162,10 +161,13 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
 
         Move.translate( basePosition + constrain( coordOf( e ) - coordOf( baseEvent ) ) );
         emit( EVENT_DRAGGING );
+        clickPrevented = true;
         prevent( e );
       } else {
-        const threshold = options.dragMinThreshold || 10;
-        isDragging = ! isTouchEvent( e ) || abs( coordOf( e ) - coordOf( baseEvent ) ) > threshold;
+        const diff = abs( coordOf( e ) - coordOf( baseEvent ) );
+        let { dragMinThreshold: thresholds } = options;
+        thresholds = isObject( thresholds ) ? thresholds : { mouse: 0, touch: +thresholds || 10 };
+        isDragging = diff > ( isTouchEvent( e ) ? thresholds.touch : thresholds.mouse );
 
         if ( isSliderDirection() ) {
           prevent( e );

src/js/components/Scroll/Scroll.ts

@@ -38,6 +38,9 @@ export function Scroll( Splide: Splide, Components: Components, options: Options
    */
   let interval: RequestIntervalInterface;
 
+  /**
+   * Holds the callback function.
+   */
   let scrollCallback: AnyFunction;
 
   /**

src/js/test/php/examples/default.php

@@ -31,7 +31,10 @@ $settings = get_settings();
         // pagination: false,
         // arrows: false,
         useScroll: true,
-        // focus: 'center',1
+        // focus: 'center',
+        dragMinThreshold: {
+          mouse: 4,
+        },
         classes: {
           arrows: 'splide__arrows splide__test',
         },
@@ -45,21 +48,21 @@ $settings = get_settings();
         },
       } );
 
-      // splide.on( 'moved', () => {
-      //   console.log( 'moved' );
-      // } );
-      //
-      // splide.on( 'visible', Slide => {
-      //   console.log( 'visible', Slide.index );
-      // } );
-      //
-      // splide.on( 'hidden', Slide => {
-      //   console.log( 'hidden', Slide.index );
-      // } );
-      //
-      // splide.on( 'click', () => {
-      //   console.log( 'click' );
-      // } );
+      splide.on( 'moved', () => {
+        console.log( 'moved' );
+      } );
+
+      splide.on( 'visible', Slide => {
+        console.log( 'visible', Slide.index );
+      } );
+
+      splide.on( 'hidden', Slide => {
+        console.log( 'hidden', Slide.index );
+      } );
+
+      splide.on( 'click', () => {
+        console.log( 'click' );
+      } );
 
       splide.mount();
     } );

src/js/test/php/examples/sync.php

@@ -25,14 +25,18 @@ $settings = get_settings();
       } );
 
       var splide02 = new Splide( '#splide02', {
-        // width       : 600,
+        width       : 600,
         fixedWidth  : 100,
         fixedHeight : 56,
         gap         : '.7em',
         isNavigation: true,
         focus       : 'center',
         pagination  : false,
-        type        : 'loop',
+        // type        : 'loop',
+        dragMinThreshold: {
+          mouse: 10,
+          touch: 10,
+        },
       } );
 
       var splide03 = new Splide( '#splide03', {

src/js/types/options.ts

@@ -318,9 +318,9 @@ export interface ResponsiveOptions {
 
   /**
    * The required distance to start moving the slider by the touch action.
-   * Other pointing devices will ignore this value.
+   * If you want to define the threshold for the mouse, provide an object.
    */
-  dragMinThreshold?: number;
+  dragMinThreshold?: number | { mouse: number, touch: number };
 
   /**
    * Determine the power of "flick". The larger number this is, the farther the slider runs.