javascript – Select Items on longpress and touchmove for mobile application-ThrowExceptions

Exception or error:

I am building an application based on Vue.js. I have a bunch of list items and want to select them on longPress + touchmove(mousemove) as like how Google Photos did it.

I am done selecting items till the user reaches the bottom of the viewport, once reaches I am dynamically updating the scroll position but item selection not happening. In my application overflow:auto was applied to the HTML element and don’t want to change that.

Following getDynamicScrollingDirection() will trigger on mouseMove event and it gives me the value which direction should I need to scroll like Top and Bottom. Based on that direction value getDynamicScrollingDirection() will trigger. While scrolling movemove event not happening on listitem once it scrolls stops mousemove event working.

computed: {
    getDynamicScrollingDirection() {
      const viewportHeight = window.innerHeight;
      const bottomThreshold = viewportHeight - 140;
      if (this.mousePosition.clientY < bottomThreshold) return null;
      return {
        direction: 'bottom',
      };
    },
  },
watch: {
    getDynamicScrollingDirection(value) {
      if (!value) return;
      // const htmlEle = document.querySelector('html');
      // htmlEle.scrollTop += 200;
      window.scrollTo({
        top: 100,
        left: 0,
        behavior: 'smooth'
      });
    }
  },
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *