zoukankan      html  css  js  c++  java
  • vue移动端拖拽移动元素

    <template>
        <div
          ref="dragBox"
          style="position: fixed; left: 100px; top: 200px"
          @touchstart="touchstartHandle('dragBox', $event)"
          @touchmove="touchmoveHandle('dragBox', $event)"
        >
          可拖拽元素
        </div>
    </template>
       data() {
            return {
                coordinate: {
                    client: {},
                    elePosition: {}
                }
            }
        },
        methods: {
            touchstartHandle(refName, e) {
                let element = e.targetTouches[0]
                // 记录点击的坐标
                this.coordinate.client = {
                    x: element.clientX,
                    y: element.clientY
                }
                // 记录需要移动的元素坐标
                this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
                this.coordinate.elePosition.top = this.$refs[refName].offsetTop
            },
            touchmoveHandle(refName, e) {
                let element = e.targetTouches[0]
                // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
                let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
                let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
                // 限制可移动距离,不超出可视区域
                x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
                y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
                // 移动当前元素
                this.$refs[refName].style.left = x + 'px'
                this.$refs[refName].style.top = y + 'px'
            }
        },
  • 相关阅读:
    设计模式之工厂方法3
    Orchard CMS中如何打包不带源码的模块
    Dump Checking
    认识WinDbg
    Bootstrap3.0学习第九轮(CSS补充)
    SVN版本冲突解决详解
    windbg Symbol file path
    SVN下错误集锦
    MvcMovieStore mvc5.0,EF6.01
    SQL Server中的窗口函数
  • 原文地址:https://www.cnblogs.com/maxiansheng/p/12454077.html
Copyright © 2011-2022 走看看