jQuery实现弹出框拖拽

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现弹出框拖拽相关的知识，希望对你有一定的参考价值。

主要应用jQuery的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.on(‘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.off(‘mousemove‘);
            });        
        </script>            
    </body>
</html>

　　　　　　jQuery兼容ie7的前提：

chrome firefox ie7 ie8+
√ √ √ √

　

 

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

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

以上是关于jQuery实现弹出框拖拽的主要内容，如果未能解决你的问题，请参考以下文章

Javascript之实现登录框拖拽效果

js实现鼠标的拖拽效果

jquery拖拽插件Easydrag

vue 自定义指令实现input框拖拽 并且自身可以调整宽度

js弹出div并显示遮罩层

怎样用jquery实现弹出框的弹出时渐渐增大,最小化时渐渐变小的特效，在此先感谢！