• touchmover 手机端拖动方法


    function drag(obj, parentNode) {
    var obj = document.getElementById(obj);
    if (arguments.length == 1) {
    var parentNode = window.self;
    var pWidth = parentNode.innerWidth, pHeight = parentNode.innerHeight;
    } else {
    var parentNode = document.getElementById(parentNode);
    var pWidth = parentNode.clientWidth, pHeight = parentNode.clientHeight;
    }
    obj.addEventListener('touchstart', function (event) {
    //当只有一个手指时 .
    if (event.touches.length == 1) {
    //禁止浏览器默认事
    // event.preventDefault();
    };
    var touch = event.targetTouches[0];
    var disX = touch.clientX - obj.offsetLeft, disY = touch.clientY - obj.offsetTop;
    var oWidth = obj.offsetWidth, oHeight = obj.offsetHeight;
    obj.addEventListener('touchmove', function (event) {
    var touch = event.targetTouches[0];
    obj.style.left = touch.clientX - disX + 'px';
    obj.style.top = touch.clientY - disY + 'px';
    //左侧
    console.log(obj.offsetLeft)
    if (obj.offsetLeft - 40 <= 0) {
    obj.style.left = 0;
    };
    //右侧
    if (obj.offsetLeft >= pWidth - oWidth) {
    obj.style.left = pWidth - oWidth + 'px';
    };
    //上面
    if (obj.offsetTop <= 0) {
    obj.style.top = 0;
    };
    //下面
    if (obj.offsetTop >= pHeight - oHeight) {
    obj.style.top = pHeight - oHeight + 'px';
    };
    });
    obj.addEventListener('touchend',function(event){
    obj.removeEventListener('touchmove');
    obj.removeEventListener('touchend');
    })
    });
    }

    一分耕耘,一分收获
  • 相关阅读:
    订单号设计
    小公司的技术架构原则
    Redis配置详解
    实现图片懒加载
    Js的GC机制
    防抖与节流
    Js中的堆栈
    浏览器窗口间通信
    块级格式化上下文
    实现瀑布流布局
  • 原文地址:https://www.cnblogs.com/sure2016/p/5852295.html
Copyright © 2020-2023  润新知