弹窗鼠标拖动功能-js

$(document).ready(function(){//弹框拖拽功能
            var firstX,firstY,lastX,lastY;//鼠标移动的坐标；

            $('.contparent').each(function(){//获取要拖拽的div的父元素，也可以是拖拽元素本身
                var srr,ml,mt;
                $(this).find('div').eq(0).mousedown(function(e){
                    var e = e || window.event;
                    if(e.target==this){  //阻止事件捕获，只作用于div本身，不作用于div内部的元素
                        srr = true;
                        $(this).css('cursor','move');
                        ml = parseInt($(this).css('margin-left'));
                        mt = parseInt($(this).css('margin-top'));

                        firstX = e.pageX;  //当鼠标点下时获取鼠标在页面中的坐标值pageX，pageY；
                        firstY = e.pageY;
                     }
                });
                $(this).find('div').eq(0).mouseup(function(){
                    srr = false;
                    $(this).css('cursor','auto');
                });
                $(this).mousemove(function(e){  //这里的this指的是鼠标的移动范围，可以是document,也可以是父div，要有足够的范围
                    var e = e || window.event;
                    $(this).mouseup(function(){
                        srr = false;
                    });

                    if(srr){    //当
                        lastX = e.pageX;
                        lastY = e.pageY;
                        var sX =ml + lastX-firstX; //获取当前的鼠标的坐标值与鼠标刚落下时的坐标值之差，然后赋值给div的margin
                        var sY =mt + lastY-firstY;
                        $(this).find('div').eq(0).css({'margin-left':sX+'px','margin-top':sY+'px'});
                    }
                });
            });
        });

该方法实现了弹窗在可视范围内的随意拖动

转载于:https://www.cnblogs.com/RoadAspenBK/p/7200769.html