zoukankan      html  css  js  c++  java
  • 元素跟随手指移动

    @touchstart.stop="touchstartHandle_icon('dragBox',$event)"
                    @touchmove.stop="touchmoveHandle_icon('dragBox',$event)"
                    @touchend.stop="toucendveHandle_icon('dragBox',$event)"
    //开始拖动
                touchstartHandle_icon(refName, e) {
                  let element = e.changedTouches[0]
                  this.startX = element.clientX
                  this.startY = element.clientY
                },
                //正在拖动
                touchmoveHandle_icon(refName, e) {
                    var current = e.changedTouches[0];
                    var x = current.clientX
                    var y = current.clientY
                    var w = this.startX - current.clientX
                    var h = this.startY - current.clientY
                    this.right = (-40 + 2*w) +'rpx';
                    this.top = (this.nowTop - 2*h) +'rpx';
                },
                //结束拖动
                toucendveHandle_icon(refName, e){
                    var current = e.changedTouches[0];
                    var x = current.clientX
                    var y = current.clientY
                    var h = this.startY - y
                    this.right = '-40rpx'
                    this.top = (this.nowTop - 2*h) +'rpx';
                    this.nowTop = this.nowTop - 2*h
                    // this.isShowLog = 0
                    if ((this.startX - x) == 0 && (this.startY - y) == 0) {
                        this.changeShow()
                    }
                },
  • 相关阅读:
    IE6兼容问题
    清除浮动的几种方法
    CSS的继承性和层叠性
    CSS基础选择器复习
    梦与醒,进与退
    CSS的入门概念
    HTML的入门概念
    弹性布局整理
    点击评论加入输入框(笔记)
    css命名(笔记)
  • 原文地址:https://www.cnblogs.com/peipeiyu/p/14715033.html
Copyright © 2011-2022 走看看