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

      

  • 相关阅读:
    oracle使用expdp备份数据库
    用Setuptools构建和分发程序包
    C#5.0-原生异步编程方式
    任务并行库
    线程-线程池1
    多线程-3(同步)
    多线程-2(线程同步)
    线程---1
    高性能-GC3
    高性能-GC2
  • 原文地址:https://www.cnblogs.com/dhsz/p/11737557.html
Copyright © 2011-2022 走看看