From 78fbb25c307ca224d813407af05cd6a5f13cfb67 Mon Sep 17 00:00:00 2001 From: Zachary Capalbo Date: Thu, 18 Jul 2019 11:17:59 -0400 Subject: [PATCH 1/5] Fix intuitive propagation behavior - Add small threshold to begin dragging - Don't propagate clicks to scrolled element after movement has reached threshold - Useful if you are scrolling something with lots of links or buttons in it - Don't propagate `mousedown` events - Useful if you have `.dragscroll`s embedded in other `.dragscroll`s --- dragscroll.js | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/dragscroll.js b/dragscroll.js index fd1cf8f..c896b3d 100644 --- a/dragscroll.js +++ b/dragscroll.js @@ -21,10 +21,12 @@ var mousemove = 'mousemove'; var mouseup = 'mouseup'; var mousedown = 'mousedown'; + var click = 'click'; var EventListener = 'EventListener'; var addEventListener = 'add'+EventListener; var removeEventListener = 'remove'+EventListener; var newScrollX, newScrollY; + var moveThreshold = 4; var dragged = []; var reset = function(i, el) { @@ -32,6 +34,7 @@ el = dragged[i++]; el = el.container || el; el[removeEventListener](mousedown, el.md, 0); + el[removeEventListener](click, el.mc, 0); _window[removeEventListener](mouseup, el.mu, 0); _window[removeEventListener](mousemove, el.mm, 0); } @@ -39,7 +42,7 @@ // cloning into array since HTMLCollection is updated dynamically dragged = [].slice.call(_document.getElementsByClassName('dragscroll')); for (i = 0; i < dragged.length;) { - (function(el, lastClientX, lastClientY, pushed, scroller, cont){ + (function(el, lastClientX, lastClientY, startX, startY, moved, pushed, scroller, cont){ (cont = el.container || el)[addEventListener]( mousedown, cont.md = function(e) { @@ -49,14 +52,23 @@ ) == cont ) { pushed = 1; - lastClientX = e.clientX; - lastClientY = e.clientY; - + moved = 0; + startX = lastClientX = e.clientX; + startY = lastClientY = e.clientY; e.preventDefault(); + e.stopPropagation(); } }, 0 ); - + (cont = el.container || el)[addEventListener]( + click, + cont.mc = function(e) { + if (moved) { + e.preventDefault(); + e.stopPropagation(); + } + }, 1 + ); _window[addEventListener]( mouseup, cont.mu = function() {pushed = 0;}, 0 ); @@ -65,6 +77,12 @@ mousemove, cont.mm = function(e) { if (pushed) { + if (!moved && + (Math.abs(e.clientX - startX) > moveThreshold || + Math.abs(e.clientY - startY) > moveThreshold)) { + moved = true; + } + if (moved) { (scroller = el.scroller||el).scrollLeft -= newScrollX = (- lastClientX + (lastClientX=e.clientX)); scroller.scrollTop -= @@ -73,6 +91,7 @@ (scroller = _document.documentElement).scrollLeft -= newScrollX; scroller.scrollTop -= newScrollY; } + } } }, 0 ); From 1a85be60486f3ff9cc39d3b2abcb355e3773ddbd Mon Sep 17 00:00:00 2001 From: Zachary Capalbo Date: Thu, 18 Jul 2019 16:01:43 -0400 Subject: [PATCH 2/5] Fix mouse leaving window while dragging --- dragscroll.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/dragscroll.js b/dragscroll.js index c896b3d..2fe3e61 100644 --- a/dragscroll.js +++ b/dragscroll.js @@ -21,6 +21,7 @@ var mousemove = 'mousemove'; var mouseup = 'mouseup'; var mousedown = 'mousedown'; + var mouseout = 'mouseout'; var click = 'click'; var EventListener = 'EventListener'; var addEventListener = 'add'+EventListener; @@ -37,6 +38,7 @@ el[removeEventListener](click, el.mc, 0); _window[removeEventListener](mouseup, el.mu, 0); _window[removeEventListener](mousemove, el.mm, 0); + _document[removeEventListener](mouseout, el.mo, 0); } // cloning into array since HTMLCollection is updated dynamically @@ -72,7 +74,9 @@ _window[addEventListener]( mouseup, cont.mu = function() {pushed = 0;}, 0 ); - + _document[addEventListener]( + mouseout, cont.mo = function() {pushed = 0;}, 0 + ); _window[addEventListener]( mousemove, cont.mm = function(e) { From 903b97f8dafb30ae590c43f1f7289a8c7b67f211 Mon Sep 17 00:00:00 2001 From: Zachary Capalbo Date: Thu, 18 Jul 2019 16:05:26 -0400 Subject: [PATCH 3/5] A little bit cleaner mouse out of window logic --- dragscroll.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dragscroll.js b/dragscroll.js index 2fe3e61..8846cce 100644 --- a/dragscroll.js +++ b/dragscroll.js @@ -21,7 +21,7 @@ var mousemove = 'mousemove'; var mouseup = 'mouseup'; var mousedown = 'mousedown'; - var mouseout = 'mouseout'; + var mouseenter = 'mouseenter'; var click = 'click'; var EventListener = 'EventListener'; var addEventListener = 'add'+EventListener; @@ -38,7 +38,7 @@ el[removeEventListener](click, el.mc, 0); _window[removeEventListener](mouseup, el.mu, 0); _window[removeEventListener](mousemove, el.mm, 0); - _document[removeEventListener](mouseout, el.mo, 0); + _document[removeEventListener](mouseenter, el.mo, 0); } // cloning into array since HTMLCollection is updated dynamically @@ -75,7 +75,7 @@ mouseup, cont.mu = function() {pushed = 0;}, 0 ); _document[addEventListener]( - mouseout, cont.mo = function() {pushed = 0;}, 0 + mouseenter, cont.me = function(e) {if (!e.buttonsPressed) pushed = 0;}, 0 ); _window[addEventListener]( mousemove, From 2badd4a2fc4ad1962d12af88114d3dd97ef576d2 Mon Sep 17 00:00:00 2001 From: Zachary Capalbo Date: Thu, 18 Jul 2019 22:02:40 -0400 Subject: [PATCH 4/5] Mouse Enter Typo --- dragscroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dragscroll.js b/dragscroll.js index 8846cce..a441bf9 100644 --- a/dragscroll.js +++ b/dragscroll.js @@ -38,7 +38,7 @@ el[removeEventListener](click, el.mc, 0); _window[removeEventListener](mouseup, el.mu, 0); _window[removeEventListener](mousemove, el.mm, 0); - _document[removeEventListener](mouseenter, el.mo, 0); + _document[removeEventListener](mouseenter, el.me, 0); } // cloning into array since HTMLCollection is updated dynamically From 0594487bff43f04cf0ed8367f0c1ab77dccf01b4 Mon Sep 17 00:00:00 2001 From: Zachary Capalbo Date: Mon, 22 Jul 2019 13:07:32 -0400 Subject: [PATCH 5/5] Fix overzealous click prevention --- dragscroll.js | 1 + 1 file changed, 1 insertion(+) diff --git a/dragscroll.js b/dragscroll.js index a441bf9..656a985 100644 --- a/dragscroll.js +++ b/dragscroll.js @@ -68,6 +68,7 @@ if (moved) { e.preventDefault(); e.stopPropagation(); + moved = 0; pushed = 0; } }, 1 );