diff --git a/site/assets/js/main.js b/site/assets/js/main.js index bd872d8..668330e 100644 --- a/site/assets/js/main.js +++ b/site/assets/js/main.js @@ -829,15 +829,22 @@ document.addEventListener('DOMContentLoaded', function () { if (e.pointerType === 'touch' || e.button !== 0) return; dragging = true; moved = 0; startX = e.clientX; startLeft = wrap.scrollLeft; - wrap.classList.add('is-dragging'); - wrap.setPointerCapture(e.pointerId); }); wrap.addEventListener('pointermove', function (e) { if (!dragging) return; var dx = e.clientX - startX; moved = Math.max(moved, Math.abs(dx)); + if (moved <= 5) return; + // Capture only once it is a real drag: capturing on pointerdown sends the + // click to .gal-wrap instead of the photo, so the lightbox never opened. + if (!wrap.classList.contains('is-dragging')) { + wrap.classList.add('is-dragging'); + try { wrap.setPointerCapture(e.pointerId); } catch (err) {} + } wrap.scrollLeft = startLeft - dx; }); + // The tiles are links, which the browser drags natively (cancelling our drag). + wrap.addEventListener('dragstart', function (e) { e.preventDefault(); }); function endDrag(e) { if (!dragging) return; dragging = false;