Botón de desplazamiento de arrastrar y soltar de Vue

Antecedentes: una página creada recientemente originalmente tenía un botón de desplazamiento similar, pero en pantallas de dispositivos móviles con diferentes resoluciones, la posición de visualización del texto detrás del botón de desplazamiento no es fija y parte del texto quedará bloqueado por el botón de desplazamiento. Por lo tanto, es necesario agregar la funcionalidad de arrastrar y soltar.

Solución de referencia: componente de arrastrar y soltar de Dogwood-Vue

Problemas encontrados y soluciones:

1. Debido a que taeget se considera un detector de eventos pasivo, La razón es que para hacer el desplazamiento con los dos métodos mencionados en el artículo, el primero funciona, el segundo intento del método CSS no tiene ningún efecto (posiblemente la configuración ¿En la posición incorrecta?

2. Después de arrastrar, el el tamaño del componente arrastrado cambia.

Solo necesito arrastrar en el eje Y. Después de arrastrar, el tamaño del componente arrastrado cambia, la ruta de arrastre se convierte en la altura del div. y luego hacer clic en el lugar donde se bloqueó previamente el componente hará que se haga clic en el componente.

3. .Establezca la transición en "no mover" después de arrastrar y soltar

Hay un ejemplo en Internet donde se agrega la transición mientras se mira. Puede ser para suavizar el efecto pero también para tener la sensación de arrastrar y soltar. En ese momento, pensé que debería implementarse la función de arrastrar y soltar. es un problema, así que eliminé el método en el enlace de arriba y lo reemplacé con arrastrar y soltar para obtener √. Luego intenté agregar una transición, pero se bloqueó nuevamente. Por lo tanto, el atributo de transición no es adecuado aquí. es fluido sin el atributo de transición

Resumen de aprendizaje:

La función de arrastrar y soltar se implementa principalmente escuchando los eventos del mouse, calculando varios valores y ajustando constantemente la posición de. Por lo tanto, el punto de conocimiento que debe revisarse son los eventos del mouse, los datos de varios tamaños y la relación entre ellos. El inconveniente es que, aunque el problema se ha descubierto y resuelto, aún se desconoce la razón principal del problema. Espero agregar esto en el futuro.