zoukankan      html  css  js  c++  java
  • 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');
    })
    });
    }

    一分耕耘,一分收获
  • 相关阅读:
    Chrome扩展开发之一——Chrome扩展的文件结构
    Chrome扩展开发(Gmail附件管理助手)系列之〇——概述
    Springfox与swagger的整合使用
    Maven的简单使用
    关于接口功能自动化的思考
    发版流程优化备忘录
    Aho-Corasick 自动机 学习笔记
    Luogu P1495 曹冲养猪
    Luogu P2670 【扫雷游戏】
    1.1 整除
  • 原文地址:https://www.cnblogs.com/sure2016/p/5852295.html
Copyright © 2011-2022 走看看