zoukankan      html  css  js  c++  java
  • 封装一个拖拽

    export default {
      bind: function (el, binding, vnode) {
        const docEl = document.documentElement
        const move = function (e) {
          e.preventDefault()
          if (e.targetTouches.length === 1) {
            const touch = e.targetTouches[0]
            _setPosition(touch)
          }
        }
    
        function _setPosition (touch) {
          if (touch.clientY <= 40) {
            el.style.top = '0px'
          } else if (touch.clientY > (docEl.clientHeight - el.clientHeight - 47)) {
            el.style.top = (docEl.clientHeight - el.clientHeight - 47) + 'px'
          } else {
            el.style.top = (touch.clientY - (el.clientHeight / 2)) + 'px'
          }
          if (touch.clientX <= 40) {
            el.style.left = '0px'
          } else if (touch.clientX > (docEl.clientWidth - el.clientWidth + 10)) {
            el.style.left = (docEl.clientWidth - el.clientWidth) + 'px'
          } else {
            el.style.left = (touch.clientX - (el.clientWidth / 2)) + 'px'
          }
        }
    
        const up = function (e) {
          const touch = e.changedTouches[0]
    
          _setPosition(touch)
          el.removeEventListener('touchmove', move)
          el.removeEventListener('touchend', up)
          binding.value && binding.value()
        }
    
        const down = function (e) {
          el.addEventListener('touchmove', move, false)
          el.addEventListener('touchend', up, false)
        }
    
        el.addEventListener('touchstart', down, false)
      }
    }
    

      

  • 相关阅读:
    Spring Batch与ETL工具比较
    Spring Batch基本概念
    SpringBatch介绍
    2019第51周日
    用arthas的watch方法观察执行方法的输入输出
    三人行必有我师
    用arthas查看JVM已加载的类及方法信息
    线上问题排查利器Arthas
    换个视觉
    Java Servlet:服务器小程序
  • 原文地址:https://www.cnblogs.com/dhsz/p/11737557.html
Copyright © 2011-2022 走看看