Vue 拖拽滑动

因项目需求写了一个拖拽功能,不足之处望大家指正!


data() {

        positionX: 0,

        positionY: 0,

        nx: '',

        ny: '',

        dx: '',

        dy: '',

        x: '',

        y: ''

},

methods: {

     down (e) {

        let oDiv = e.target

        this.flag = true

        var touch

        if (e.touches) {

          touch = e.touches[0]

        } else {

          touch = e

        }

        this.positionX = touch.clientX

        this.positionY = touch.clientY

        this.dx = oDiv.offsetLeft

        this.dy = oDiv.offsetTop

        this.$emit('down', e)

      },

      move (e) {

        if (this.flag) {

          let oDiv = e.target

          var touch

          if (e.touches) {

            touch = e.touches[0]

          } else {

            touch = e

          }

          this.nx = touch.clientX - this.positionX

          this.ny = touch.clientY - this.positionY

          this.x = this.dx + this.nx

          this.y = this.dy + this.ny

          oDiv.style.left = this.x + 'px'

          oDiv.style.top = this.y + 'px'

        }

      },

}

你可能感兴趣的:(Vue 拖拽滑动)