Any suggestions on how to implement mouse-dragging for scroll

[hvzhim]

First of all, beautiful project! As the title says, I want to use mouse dragging instead of wheel to scroll around the bubbles. Any ideas on how this might be tackled?

[blakesanie]

Thanks for stumbling upon my project! This is not currently possible, though I imagine it could be achieved by tracking mouse up-down, and if the mouse moves while mouse is down, you could offset the scroll position of the outermost component accordingly. I encourage you to fork and pull request!

[hvzhim]

Pasted this into chrome console on https://bubbleui.blakesanie.com/#/demo and it seems to do the trick! I'll try & submit a PR when I get some time. (credit: 'thenutz' on codepen)

const bubbles = document.querySelector('._2MD0k');
const dragspeed = 2;
let isDown = false;
let startX;
let startY;
let scrollLeft;
let scrollTop;

bubbles.addEventListener('mousedown', (e) => {
  isDown = true;
  bubbles.classList.add('active');
  startX = e.pageX - bubbles.offsetLeft;
  startY = e.pageY - bubbles.offsetTop;
  scrollLeft = bubbles.scrollLeft;
  scrollTop = bubbles.scrollTop;
});
bubbles.addEventListener('mouseleave', () => {
  isDown = false;
  bubbles.classList.remove('active');
});
bubbles.addEventListener('mouseup', () => {
  isDown = false;
  bubbles.classList.remove('active');
});
bubbles.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - bubbles.offsetLeft;
  const y = e.pageY - bubbles.offsetTop;
  const walk = (x - startX) * dragspeed;
  const topwalk = (y - startY) * dragspeed;
  bubbles.scrollLeft = scrollLeft - walk;
  bubbles.scrollTop = scrollTop - topwalk;
});