Vue implements dragover to automatically scroll down when the element is dragged to the bottom of the page

The company requires a schedule function similar to WeChat Enterprise,

and then the schedule component needs to be able to drag and drop the time period to create.

Here we use dragstart+dragend+dragover to record the dragged position.
If you have not touched it, you can check my article
Vue record mouse drag Drag across the position and change the color of the position

In this case, you can actually do operations in @dragover.
On the interface,
@dragover="mouseup"
is added to the mouseup function

mouseup(event) {
    
    
	event.preventDefault();
	//这中间写你的业务逻辑
	const pageHeight = document.documentElement.scrollHeight;
	const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	const clientHeight = document.documentElement.clientHeight || window.innerHeight;
	if (scrollTop + clientHeight >= pageHeight) {
    
    
	  window.scrollTo(0, pageHeight);
	}
}

In this way, you can drag and drop slowly, but to be honest, there is a problem because the trigger of dragover monitoring has a time interval.
If you drag to the end during the interval, it will not be triggered.

In fact, we can change the way of thinking,
first use a variable to judge whether it is currently dragging,
then monitor the mouse is moved to the end,
and then start scrolling.
We
define a dragging in data, and the default value is false.

data() {
    
    
  return {
    
    
    dragging: false
  };
},

It is very simple to use it to record whether it is being dragged.
Assign a value of true in @dragstart to open the drag event
, then set the trigger event to false when the @dragend mouse is released
, and then write this in the mounted function

mounted() {
    
    
 window.addEventListener('scroll', function() {
    
    
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight || window.innerHeight;
    const pageHeight = document.documentElement.scrollHeight;
    if ((scrollTop + clientHeight >= pageHeight)&&this.dragging) {
    
    
      window.scrollTo(0, pageHeight);
    }
  });
},

Monitor the mouse movement and judge that when the mouse moves to the end and the dragging condition is true, it scrolls down.
This solves
the problem of the time interval of dragover