zoukankan      html  css  js  c++  java
  • 移动端 touch 实现 拖动元素

    var homeMove = (function () {


    //touch自适应
    var k = "ontouchend" in window ? "touchend" : "click";

    var isdrag = false;
    var moveid = document.getElementById("moveid");
    var sWidth = document.body.clientWidth;
    var sHeight = document.documentElement.clientHeight; //window.screen.height;
    var width = moveid.offsetWidth;
    var height = moveid.offsetHeight;
    var tx, x;
    var ty, y;
    var i = 0, j = 0; ;

    function movemousex(e) {

      e.preventDefault();

      if (isdrag) {
        var n = tx + e.touches[0].pageX - x;
        var maxWidth = sWidth - width;
        if (n > maxWidth) {
          n = maxWidth;
        } else if (n < 0) {
          n = 0;
        }
        $('#moveid').css("left", n);
        return false;
      }
    }


    function selectmousex(e) {

      isdrag = true;
      tx = parseInt(moveid.offsetLeft + 0);
      x = e.touches[0].pageX;
      return false;
    }

    function movemousey(e) {
      e.preventDefault();
      if (isdrag) {
        var n = ty + e.touches[0].pageY - y;
        var maxHeight = sHeight - height;
        if (n > maxHeight) {
          n = maxHeight;
        } else if (n < 0) {
          n = 0;
        }
        $('#moveid').css("top", n);
        return false;
      }
    }


    function selectmousey(e) {

      isdrag = true;
      ty = parseInt(moveid.offsetTop + 0);
      y = e.touches[0].pageY;
      return false;
    }

    function addMoveEvent() {
      moveid.addEventListener('touchend', function () {
        isdrag = false;
      });
      moveid.addEventListener('touchstart', selectmousex);
      moveid.addEventListener('touchmove', movemousex, false);
      moveid.addEventListener('touchstart', selectmousey);
      moveid.addEventListener('touchmove', movemousey, false);
      moveid.onclick = function () {
        window.location.href = "/";
      }
    }

    return { addMoveEvent: addMoveEvent };


    } ());

    $(function () {
      homeMove.addMoveEvent();
    });

  • 相关阅读:
    Node.js 调用 restful webservice
    Node.js的集群功能以及在Express的配置
    Node.js 连接mySQL程序
    客户端连接Redis
    缓存的压力测试脚本
    搭建redis集群环境
    编译EXE文件的时候pcap编译不进去。 pyinstaller pcap pypcap 报错
    selenium(五)伪造浏览器
    selenium(四)操作cookie,伪造cookie
    selenium(三)浏览器操作
  • 原文地址:https://www.cnblogs.com/Andyudd/p/5594066.html
Copyright © 2011-2022 走看看