Enable scrolling of <draggable> container while dragging an element

[PablitoDh]

It is not possible to scroll the container with the mouse while dragging an element with the mouse. Is there any way to enable this?

[phphe]

no. It use HTML Drag and Drop API. Their behavior is same.

[PablitoDh]

Why did it work in the previous version, but it doesn't work in this one?

[phphe]

do you mean he-tree-vue? It does not use HTML Drag and Drop API.

[johannesss]

I've implemented this, see example:

<template>
  <Draggable />
</template>

<script>
import '@he-tree/vue/style/default.css';
import { Draggable } from '@he-tree/vue';

export default {
  data() {
    return {
      stopDragScrollY: true
    }
  },

  computed: {
    isVerticalMaxed() {
      return window.innerHeight + window.scrollY >= document.body.offsetHeight;
    }
  },
  
  mounted() {
    window.addEventListener('drag', this.handleDrag);
  },
  
  unmounted() {
    window.removeEventListener('drag', this.handleDrag);
  },
  
  methods: {
    handleDrag(event) {
      this.stopDragScrollY = true;
      
      if (event.clientY < 150) {
        this.stopDragScrollY = false;
        this.handleScroll(-1); // scroll up
      }
      
      if (event.clientY > document.documentElement.clientHeight - 150 && !this.isVerticalMaxed) {
        this.stopDragScrollY = false;
        this.handleScroll(1); // scroll down
      }
    },
    
    handleScroll(stepY) {
      const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      window.scrollTo(0, scrollY + stepY);
      
      // continue scrolling until vertical direction is maxed using requestAnimationFrame
      if (!this.stopDragScrollY) {
        requestAnimationFrame(() => this.handleScroll(stepY));
      }
    },        
  },
}
</script>