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; //确认鼠标按下
    cur.x = event.clientX; //记录当前鼠标的x坐标
    cur.y = event.clientY; //记录当前鼠标的y坐标
    dx = div2.offsetLeft; //记录div当时的左偏移量
    dy = div2.offsetTop; //记录div的上偏移量
    }
    //鼠标移动时的函数
    function move(){
    if(flag){ //如果是鼠标按下则继续执行
    nx = event.clientX - cur.x; //记录鼠标在x轴移动的数据
    ny = event.clientY - cur.y; //记录鼠标在y轴移动的数据
    x = dx+nx <= 0 ? 0 : dx+nx; //div在x轴的偏移量加上鼠标在x轴移动的距离
    y = dy+ny <= 0 ? 0 : dy+ny; //div在y轴的偏移量加上鼠标在y轴移动的距离
    //判断是否超出容器
    if(dx+nx+200 >= document.body.offsetWidth){
    x = document.body.offsetWidth -200
    }
    if(dy+ny+200 >= window.innerHeight){
    y = window.innerHeight -200
    }
    div2.style.left = x+"px";
    div2.style.top = y +"px";
    }
    }
    //鼠标释放时候的函数
    function end(){
    flag = false;
    }
    var div2 = document.getElementById("div2");

    div2.addEventListener("touchstart",function(){
        down();
    },false)
    div2.addEventListener("touchmove",function(){
        move();
    },false)
    div2.addEventListener("touchend",function(){
        end();
    },false);
  • 相关阅读:
    Go标准库Context
    事务并发处理: DB+ORM+逻辑代码
    日志:slf4j+log4j+maven配置
    Shiro workshop
    JSP Workshop
    sql records
    Java内存模型(JMM)
    Application, JDBC, 数据库连接池, Session, 数据库的关系
    Java位操作全面总结
    Effective Java总结
  • 原文地址:https://www.cnblogs.com/x1024/p/6515870.html
Copyright © 2011-2022 走看看