美文网首页
Vue 拖拽滑动

Vue 拖拽滑动

作者: 穿西装的程序员 | 来源:发表于2018-06-15 13:37 被阅读0次

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


<div @touchmove="move" mousemove="move" @touchstart="down" @mousedown="down"></div>

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 拖拽滑动

      本文链接:https://www.haomeiwen.com/subject/srvpeftx.html