Bug Fix: Change the drag target element from the list to the track because it doesn't have explicit width.

dist/js/splide.esm.js

@@ -3913,12 +3913,13 @@ var FRICTION_REDUCER = 7;
     mount: function mount() {
       var _this = this;
 
-      var list = Components.Elements.list;
-      Splide.on('touchstart mousedown', start, list).on('touchmove mousemove', move, list, {
+      var Elements = Components.Elements;
+      var track = Elements.track;
+      Splide.on('touchstart mousedown', start, track).on('touchmove mousemove', move, track, {
         passive: false
-      }).on('touchend touchcancel mouseleave mouseup dragend', end, list).on('mounted refresh', function () {
+      }).on('touchend touchcancel mouseleave mouseup dragend', end, track).on('mounted refresh', function () {
         // Prevent dragging an image or anchor itself.
-        each(list.querySelectorAll('img, a'), function (elm) {
+        each(Elements.list.querySelectorAll('img, a'), function (elm) {
           Splide.off('dragstart', elm).on('dragstart', function (e) {
             e.preventDefault();
           }, elm, {
@@ -3937,6 +3938,8 @@ var FRICTION_REDUCER = 7;
    */
 
   function start(e) {
+    console.log('start');
+
     if (!Drag.disabled && !isDragging) {
       // These prams are used to evaluate whether the slider should start moving.
       init(e);

dist/js/splide.js

@@ -3903,12 +3903,13 @@ var FRICTION_REDUCER = 7;
     mount: function mount() {
       var _this = this;
 
-      var list = Components.Elements.list;
-      Splide.on('touchstart mousedown', start, list).on('touchmove mousemove', move, list, {
+      var Elements = Components.Elements;
+      var track = Elements.track;
+      Splide.on('touchstart mousedown', start, track).on('touchmove mousemove', move, track, {
         passive: false
-      }).on('touchend touchcancel mouseleave mouseup dragend', end, list).on('mounted refresh', function () {
+      }).on('touchend touchcancel mouseleave mouseup dragend', end, track).on('mounted refresh', function () {
         // Prevent dragging an image or anchor itself.
-        each(list.querySelectorAll('img, a'), function (elm) {
+        each(Elements.list.querySelectorAll('img, a'), function (elm) {
           Splide.off('dragstart', elm).on('dragstart', function (e) {
             e.preventDefault();
           }, elm, {
@@ -3927,6 +3928,8 @@ var FRICTION_REDUCER = 7;
    */
 
   function start(e) {
+    console.log('start');
+
     if (!Drag.disabled && !isDragging) {
       // These prams are used to evaluate whether the slider should start moving.
       init(e);

src/js/components/drag/index.js

@@ -111,15 +111,16 @@ export default ( Splide, Components ) => {
 		 * Called when the component is mounted.
 		 */
 		mount() {
-			const list = Components.Elements.list;
+			const Elements = Components.Elements;
+			const track    = Elements.track;
 
 			Splide
-				.on( 'touchstart mousedown', start, list )
-				.on( 'touchmove mousemove', move, list, { passive: false } )
-				.on( 'touchend touchcancel mouseleave mouseup dragend', end, list )
+				.on( 'touchstart mousedown', start, track )
+				.on( 'touchmove mousemove', move, track, { passive: false } )
+				.on( 'touchend touchcancel mouseleave mouseup dragend', end, track )
 				.on( 'mounted refresh', () => {
 					// Prevent dragging an image or anchor itself.
-					each( list.querySelectorAll( 'img, a' ), elm => {
+					each( Elements.list.querySelectorAll( 'img, a' ), elm => {
 						Splide
 							.off( 'dragstart', elm )
 							.on( 'dragstart', e => { e.preventDefault() }, elm, { passive: false } );
@@ -137,6 +138,8 @@ export default ( Splide, Components ) => {
 	 * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
 	 */
 	function start( e ) {
+		console.log( 'start' );
+
 		if ( ! Drag.disabled && ! isDragging ) {
 			// These prams are used to evaluate whether the slider should start moving.
 			init( e );