Add the `noDrag` option for #470.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.1
+ * Version  : 3.2.2
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1763,8 +1763,10 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerDown(e) {
     if (!disabled) {
+      const { noDrag } = options;
       const isTouch = isTouchEvent(e);
-      if (isTouch || !e.button) {
+      const isDraggable = !noDrag || isHTMLElement(e.target) && !matches(e.target, noDrag);
+      if (isDraggable && (isTouch || !e.button)) {
         if (!Move.isBusy()) {
           target = isTouch ? track : window;
           prevBaseEvent = null;

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.1
+ * Version  : 3.2.2
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1759,8 +1759,10 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerDown(e) {
     if (!disabled) {
+      const { noDrag } = options;
       const isTouch = isTouchEvent(e);
-      if (isTouch || !e.button) {
+      const isDraggable = !noDrag || isHTMLElement(e.target) && !matches(e.target, noDrag);
+      if (isDraggable && (isTouch || !e.button)) {
         if (!Move.isBusy()) {
           target = isTouch ? track : window;
           prevBaseEvent = null;

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.2.1
+ * Version  : 3.2.2
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2123,9 +2123,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function onPointerDown(e) {
       if (!disabled) {
+        var noDrag = options.noDrag;
         var isTouch = isTouchEvent(e);
+        var isDraggable = !noDrag || isHTMLElement(e.target) && !matches(e.target, noDrag);
 
-        if (isTouch || !e.button) {
+        if (isDraggable && (isTouch || !e.button)) {
           if (!Move.isBusy()) {
             target = isTouch ? track : window;
             prevBaseEvent = null;

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,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAkU9F"}
+{"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,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAoU9F"}

dist/types/types/options.d.ts

@@ -124,6 +124,10 @@ export interface Options extends ResponsiveOptions {
      * where `tabindex="-1"` will be assigned when their ascendant slide is hidden.
      */
     focusableNodes?: string;
+    /**
+     * The selector for nodes that cannot be dragged.
+     */
+    noDrag?: string;
     /**
      * Determines whether to use the Transition component or not.
      */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "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, isObject, min, noop, prevent, sign } from '../../utils';
+import { abs, isHTMLElement, isObject, matches, min, noop, prevent, sign } from '../../utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
 
 
@@ -118,9 +118,11 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    */
   function onPointerDown( e: TouchEvent | MouseEvent ): void {
     if ( ! disabled ) {
-      const isTouch = isTouchEvent( e );
+      const { noDrag } = options;
+      const isTouch     = isTouchEvent( e );
+      const isDraggable = ! noDrag || ( isHTMLElement( e.target ) && ! matches( e.target, noDrag ) );
 
-      if ( isTouch || ! e.button ) {
+      if ( isDraggable && ( isTouch || ! e.button ) ) {
         if ( ! Move.isBusy() ) {
           target         = isTouch ? track : window;
           prevBaseEvent  = null;

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

@@ -27,6 +27,7 @@ $settings = get_settings();
           right: 0,
           left: 40,
         },
+        noDrag: 'button',
         breakpoints: {
           1000: {
             destroy: true,

src/js/types/options.ts

@@ -145,7 +145,12 @@ export interface Options extends ResponsiveOptions {
    * The selector to get focusable elements
    * where `tabindex="-1"` will be assigned when their ascendant slide is hidden.
    */
-  focusableNodes?: string,
+  focusableNodes?: string;
+
+  /**
+   * The selector for nodes that cannot be dragged.
+   */
+  noDrag?: string;
 
   /**
    * Determines whether to use the Transition component or not.