可移动窗口

本文主要是介绍可移动窗口，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

//拖拽
MoveDop1(); //【一级弹窗拖拽】
MoveDop2(); //【二级弹窗拖拽】

//一级弹窗拖拽  所有包含 modalHeader 类的表头的弹窗都可拖拽
function MoveDop1() {
    var dom = $("body .modalHeader").parent();
    var flag = false; //判断是否含有二级弹窗阅片 
    var move = false;
    var _x, _y;
    $(document).on("mousedown", "body .modalHeader", function (e) {
        move = true;
        _x = e.pageX - parseInt($(this).parent().css("left"));
        _y = e.pageY - parseInt($(this).parent().css("top"));
        //赋值当前移动元素
        dom = $(this).parent();

        //if ($(this).parent().attr("id") == "yuepian") {
        //    flag = true;
        //} else {
        //    flag = false;
        //}
    });

    $(document).mousemove(function (e) {
        if (move) {
            var x = e.pageX - _x;
            //控件左上角到屏幕左上角的相对位置 
            var y = e.pageY - _y;
            if (flag) {
                $("#yuepian").css({ "top": y, "left": x });
            } else {
                dom.css({ "top": y, "left": x });
            }

            if (document.selection == null) {

            } else {
                document.selection.empty();
            }
        }
    }).mouseup(function () {
        move = false;
    });
}

//二级弹窗拖拽  -- 表头必须添加 noModalHeader 类
function MoveDop2() {
    var dom = $("body .noModalHeader").parent();
    var flag = false; //判断是否含有二级弹窗阅片
    var move = false;
    var _x, _y;
    $("body .noModalHeader").mousedown(function (e) {
        move = true;
        _x = e.pageX - parseInt($(this).parent().css("left"));
        _y = e.pageY - parseInt($(this).parent().css("top"));
        //赋值当前移动元素
        dom = $(this).parent();

        if ($(this).parent().attr("id") == "yuepian") {
            flag = true;
        } else {
            flag = false;
        }
    });
    $(document).mousemove(function (e) {
        if (move) {
            var x = e.pageX - _x;
            //控件左上角到屏幕左上角的相对位置 
            var y = e.pageY - _y;

            if (flag) {
                $("#yuepian").css({ "top": y, "left": x });
            } else {
                dom.css({ "top": y, "left": x });
            }
            if (document.selection == null) {

            } else {
                document.selection.empty();
            }

        }
    }).mouseup(function () {
        move = false;
    });
}

这篇关于可移动窗口的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！