zoukankan      html  css  js  c++  java
  • 适配 移动 pc 拖拽效果

        var flag = false;
        var cur = {
            x:0,
            y:0
        }
        var nx,ny,dx,dy,x,y ;
        function down(){
            flag = true;
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            cur.x = touch.clientX;
            cur.y = touch.clientY;
            dx = div2.offsetLeft;
            dy = div2.offsetTop;
        }
        function move(){
            if(flag){
                var touch ;
                if(event.touches){
                    touch = event.touches[0];
                }else {
                    touch = event;
                }
                nx = touch.clientX - cur.x;
                ny = touch.clientY - cur.y;
                x = dx+nx;
                y = dy+ny;
                div2.style.left = x+"px";
                div2.style.top = y +"px";
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove",function(){
                    event.preventDefault();
                },false);
            }
        }
        var div2 = document.getElementById("div2");
        div2.addEventListener("mousedown",function(){
            down();
        },false);
        div2.addEventListener("touchstart",function(){
            down();
        },false)
        div2.addEventListener("mousemove",function(){
            move();
        },false);
        div2.addEventListener("touchmove",function(){
            move();
        },false)
        document.body.addEventListener("mouseup",function(){
            flag = false;
        },false);
        div2.addEventListener("touchend",function(){
            flag = false;
        },false)
  • 相关阅读:
    mongodb副本集群搭建
    redis 哨兵集群搭建
    mysql binlog备份
    MySQL 日志
    mysql 事务及innodb隔离级别
    sysbench使用
    PXC安装
    mysql搭建主从数据库
    GTID
    文件的压缩和解压
  • 原文地址:https://www.cnblogs.com/vali/p/8056104.html
Copyright © 2011-2022 走看看