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();
             }
         }
    }
  • 相关阅读:
    vue vmodel input type=checkbox的问题
    springboot配置文件优先级
    原生js实现复制功能
    Long.valueOf和Long.parseLong的区别
    程序员学习参考
    国外开源项目
    .NET快速入门教程
    Microsoft Update Catalog 离线安装包下载
    php header示例代码
    CentOS下iptables设置
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13723064.html
Copyright © 2011-2022 走看看