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

    一分耕耘,一分收获
  • 相关阅读:
    IO流操作-图片操作(二)
    SQL Server 大数据量批量插入
    XSS【跨站脚本攻击】
    Log4net配置
    发布网站碰到的问题
    操作百度API
    Html.BeginForm
    jquery自动识别输入的都是数字
    mysql中随机取出几条数据
    Html中截切文章内容,造成标签不全的问题
  • 原文地址:https://www.cnblogs.com/sure2016/p/5852295.html
Copyright © 2011-2022 走看看