Vue 拖拽滑动

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


<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'

        }

      },

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容