jQuery实现弹出框拖拽

最新推荐文章于 2021-06-16 19:09:22 发布

weixin_30528371

最新推荐文章于 2021-06-16 19:09:22 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cquptzy/p/7476445.html

版权

主要应用jQuery的bind和unbind方法(jQuery 3.0以上可以使用on和off)实现在 mousedown 的情况下进行mousemove。

其他：$(window).width() 、$(window).height() ---- 获取浏览页面的宽高。

　　　pageX、pagerY（ie8不兼容）或 clientX、clientY --------- 获取鼠标当前位置的横轴纵轴。

　　　offset().left、offset().top------------------------- div距离左边界的长度和上边界的长度。

下面是简易实现方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>移动式弹出框</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: rgba(215,215,215,0.2);
            }
            .eject{
                height: 200px;
                width: 400px;
                background-color: blue;
                position: absolute;
                top: 100px;
                left: 30%;
            }
            .eject_move{
                width: 400px;
                height: 50px;
                background-color: red;
                cursor: move;
                line-height: 50px;
                text-align: center;
                font-size: 2em;
            }
        </style>    
    </head>    
    <body>    
        <div class="eject">
            <div class="eject_move">拖动位置</div>
        </div>    
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>        
        <script type="text/javascript">    
        //    可移动弹出框
            var eject_move = $(".eject_move");
            var eject = $(".eject");
            eject_move.mousedown(function(e){
                var max_x = $(window).width() - 380;            //获取浏览页面的宽度
                var max_y = $(window).height() -200;
                var ev = window.event || e;      
                var old_mouse_x = ev.clientX;                        //获取鼠标开始的横轴位置
                var old_mouse_y = ev.clientY;                        //获取鼠标开始的纵轴位置
                var position_l = eject.offset().left;            //弹出框距离的横轴位置
                var position_t = eject.offset().top;            //弹出框距离的纵轴位置
                eject_move.bind('mousemove',function(n){
                    var nv = window.event || n;
                    var new_mouse_x = nv.clientX;                    //获取鼠标现在的横轴位置
                    var new_mouse_y = nv.clientY;                    //获取鼠标现在的纵轴位置
                    var new_x = new_mouse_x - old_mouse_x +position_l;    //弹出框现在的横轴位置
                    var new_y = new_mouse_y - old_mouse_y +position_t;    //弹出框现在的纵轴位置
                    //三元表达式 判断有没有超出边界，有的话置于相应的值
                    new_x = (new_x < 0 )?0:new_x;
                    new_y = (new_y < 0 )?0:new_y;
                    new_x = (new_x > max_x)?max_x:new_x;
                    new_y = (new_y > max_y)?max_y:new_y;
                    eject.css({'left':new_x,'top':new_y});
                });
                
            });
        //    鼠标抬起
            eject.mouseup(function(){
                eject_move.unbind('mousemove');
            });        
        </script>            
    </body>
</html>

　　　　　　jQuery兼容ie7的前提：

chrome	firefox	ie7	ie8+
√	√	√	√

虽然ie兼容，但是这种写法存在弊端。

导致ie拖动时会出现卡顿现象。而火狐谷歌卡顿现象就不明显。

转载于:https://www.cnblogs.com/cquptzy/p/7476445.html

weixin_30528371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现弹出框拖拽

主要应用jQuery的bind和unbind方法(jQuery 3.0以上可以使用on和off)实现在 mousedown 的情况下进行mousemove。其他：$(window).width() 、$(window).height() ---- 获取浏览页面的宽高。　　　pageX、pagerY（ie8不兼容）或 clientX、clientY --------- 获取鼠标当前...
复制链接

扫一扫