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)
      }
    }
    

      

  • 相关阅读:
    active learning
    PLS-00201: identifier 'SYS.DBMS_CUBE_EXP' must be declared
    浅谈防火墙
    yum安装nginx错误处理
    简单的SQL注入
    mysql之查询语句练习题
    Linux权限和用户管理
    Linux文件及目录查找命令~~续集
    linux文件及目录查找命令
    linux文件管理练习题
  • 原文地址:https://www.cnblogs.com/dhsz/p/11737557.html
Copyright © 2011-2022 走看看