Jquery 实现弹出层插件

2020-05-17 06:27:24易采站长站整理

    //        $(document).mousemove(function (event) {
    //            if (isMove) {
    //                $(tag).css({
    //                    ‘left’: event.pageX – abs_x + $(tag).width() / 2 – 1,
    //                    ‘top’: event.pageY – abs_y + $(tag).height() / 2 – 1
    //                });
    //            }
    //            return false;
    //        });
    //    }

方法二,本人目前采用的方法,利用document的down和up,但是还要有些许问题,移动过快的问题,坐标有小小的跳动现象

  我还发现一个问题,如果我手残把弹出层直接拖到了屏幕上方的内部,这时放手,呵呵,你永远也不能把它拖回来或点关闭了。我去看了下百度首页的弹出层,他们也有这样的现象,但是把窗口点放大缩小后弹出层会重新回到中心。我也试着这样做,但是我绑定onresize会出现不能向最下面移动,他们用的事件肯定不是onresize.所以我就直接判断鼠标位置不能小于0了。


 //弹出层的拖拽
    //control 为拖拽的元素,tag为动作的元素,一般control在tag内
    function xsdrag(control, tag) {
        $(control).mousedown(function (e)//e鼠标事件 
        {
            var offset = $(this).offset(); //DIV在页面的位置 
            var x = e.pageX – offset.left; //获得鼠标指针离DIV元素左边界的距离 
            var y = e.pageY – offset.top; //获得鼠标指针离DIV元素上边界的距离 
            $(document).bind(“mousemove”, function (ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 
            {
                if (ev.pageY <= 0) { return; }//防止边框超过屏幕后无法关闭和拖动