zoukankan      html  css  js  c++  java
  • JS拖拽的封装函数

    代码如下;

    function drag(ele){//2.分析不确定的值 提成参数  拖拽的元素
        ele.onmousedown = function(event){
            //如果是ie低版本浏览器 就可以使用 setCapture
            if(ele.setCapture!=undefined){
                ele.setCapture();//设置全局捕获
            }
            var ev = event || window.event;
            //计算位置差
            var disX = ev.clientX - ele.offsetLeft;
            var disY = ev.clientY - ele.offsetTop;
            // 并 移动鼠标
            document.onmousemove = function(event){
                var ev = event || window.event;
                //div就会跟随鼠标进行移动  将div 定位到 鼠标位置
                //1.获取鼠标位置
                var x = ev.clientX - disX;
                var y = ev.clientY - disY;
                //控制范围:在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
                //上边界
                if(y<=0){
                    y = 0;
                }
                //左边界
                if(x<=0){
                    x = 0;
                }
                //下边界  窗口高 - 图片高
                if(y >= document.documentElement.clientHeight - ele.clientHeight){
                    y = document.documentElement.clientHeight - ele.clientHeight;
                }
                //右边界   窗口宽 - 图片宽
                if(x >= document.documentElement.clientWidth - ele.clientWidth){
                    x = document.documentElement.clientWidth - ele.clientWidth
                }
                //2.给div定位
                ele.style.left = x + 'px';
                ele.style.top = y + 'px';
            }
            return false;
        }
         // 一旦鼠标抬起 div就停止
         ele.onmouseup = function(){
             //解绑div 的 mousemove事件
             document.onmousemove = null;
             //如果在ie8以下 就释放全局捕获
             if(ele.releaseCapture!=undefined){
                ele.releaseCapture();
             }
         }
    }
  • 相关阅读:
    CodeForces
    设计模式之装饰模式和代理模式区别与联系
    java反射 概念
    Java 反射详解 转载
    Spring--AOP 例子
    MD5加密
    面向对象编程思想(OOP)
    软件测试assert
    junit4.9测试用例 spring测试用例 Assert 注解
    断言
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13723064.html
Copyright © 2011-2022 走看看