El proyecto Vue encapsula el componente de arrastre de div para realizar el arrastre de div

Escenario: en el proyecto del lado de la PC, se encontrará con una escena en la que varias páginas se superponen después del cuadro emergente, que es similar a abrir varias carpetas en la computadora. En este momento, si desea mostrar el contenido de las dos páginas completamente al mismo tiempo, puede arrastrar la página y cambiar la ubicación

Muchos tutoriales usan métodos personalizados para usar en un solo componente. Este artículo lo llevará a encapsular un método para arrastrar y soltar divs en un proyecto de Vue y registrarse para uso global.

Pasos de implementación:

1. Cree un archivo drag.js en la carpeta util debajo de src para almacenar el código para implementar el efecto de arrastre

export default (Vue) => {
  Vue.directive("drags", {
    inserted: function (el) {
      let oDiv = el   // 获取当前元素
      oDiv.onmousedown = (e) => {
        // 算出鼠标相对元素的位置
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = (e) => {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY
          oDiv.style.left = left + 'px'
          oDiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
        document.onmousemove = null
       document.onmouseup = null
        }
      }
    }
  })
}

2. Método de registro en main.js

import directives from './util/derectives'

Vue.use(directives)

3. Use, simplemente agregue v-drag directamente a la etiqueta div que debe arrastrarse, no es necesario introducirla por separado

<div v-drag></div>

En este punto, los pasos para implementar el arrastre de div en Vue han terminado, amigos que lo necesitan, ¡vayan y pruébenlo!