Javascript-拖拽

Css:WinMould.css

/*窗體模板*/
.win-mould { position: absolute; top: 0px; left: -10000px; zoom: 1; z-index: 900000; overflow: hidden; display: none }
.win-mould .win-mask { width: 100%; height: 100%; background: #293541; position: absolute; left: 0px; top: 0px; filter: alpha(opacity=50); opacity: .5; z-index: 1; _z-index: 999; }
.win-mould .win-content { background: #fff; position: relative; left: 0px; top: 0px; z-index: 2; }
.win-content .win-html { position: relative; border: 1px solid #fff; *zoom: 1; }
.win-content .win-html:after { content: 'clear'; clear: both; display: block; height: 0px; overflow: hidden; visibility: hidden; }
.win-content .win-html iframe { display: block; }
.win-content .win-iframe { width: 100%; height: 100%; background: #fff; filter: alpha(opacity=0); opacity: 0; top: 0px; left: 0px; z-index: 1000; position: absolute; display: none; }
.win-content .win-tit { background: #293541; height: 35px; cursor: move; overflow: hidden; box-shadow: 2px 0px 5px #888; }
.win-tit .win-close { width: 21px; height: 21px; overflow: hidden; display: block; background: #293541 url(/images/newcloes.png) no-repeat 3px 3px; float: right; margin: 6px 6px 0px 0px; _display: inline; border: 1px solid #707274; }
.win-tit .win-close:hover { background-color: #151c22; }
.tit-text { line-height: 35px; text-indent: 10px; padding: 0px; margin: 0px; color: #fff; float: left; font-family: 'Microsoft YaHei'; font-size: 17px; letter-spacing: 1px; }
.win-mask2 { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; -webkit-user-select: none; -moz-user-select: none; }

Js:WindowForm.js

(function (w, $) {
    function loadCss(url) {
        var s = document.createElement("link");
        s.href = url;
        s.rel = "stylesheet";
        s.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(s);
    }
    loadCss('/Css/WinMould.css');

    w.WF = {
        winform: function (obj) {
            return new winform({
                tit: obj.tit,
                $dom: obj.$dom,
                html: obj.html,
                w: obj.w,
                fn: function (fn) { obj.fn(fn); },
                fn2: function () { obj.fn2(); },
                h: obj.h
            });
        }
    }

    w.WF2 = {
        winform: function (obj) {
            var newobj = new winform2({
                $dom: obj.$dom,
                w: obj.w,
                fn: function (fn) { obj.fn(fn); },
                fn2: function () { obj.fn2(); }
            });
            newobj.load();
            return newobj;
        }
    }

    var titbox_height = 35;
    ///彈出窗體
    var winform = function (obj) {
        this._$mask = ".win-mask";//遮罩層
        this._$p_box = ".win-mould";//box層
        this.$z_box = obj.$dom //".shelter";//包容層
        this._$p_box_mask = ".win-mask2";//內部遮罩層
        this.htmltemp = obj.html;//;//包容html
        this.htmlwin = '<div class="win-mask"style="width:100%;height:100%;background:#000;position:absolute;z-index:7000;top:0px;left:0px;opacity:0.45;filter:alpha(opacity=45);display:none;"></div><div class="win-mould"><div class="win-content"><div class="win-tit"><p class="tit-text" style="float:left"></p><a href="javascript:void(0)"class="win-close"></a></div><div class="win-html">{$html}<div class="win-iframe"></div></div></div><div class="clear"></div><div class="win-mask2" onselectstart="return false" style="width: 100%; height: 100%;position: absolute; left: 0px; top: 0px; -webkit-user-select:none; -moz-user-select:none;" ></div></div>';//boxhtml
        this.children_w = obj.w//380;//嵌套寬度
        this.children_h = obj.h;//嵌套高度
        this._p_border_w = 1;//box邊框
        this._p_maring_w = 0;//box邊距
        this._p_paddint_w = 0;//box內邊距
        this._pheight = 0;//計錄窗口高度
        this._pwidth = 0;
        this.fn = obj.fn;//回調函數
        this.fn_close = obj.fn2;//function () { };//關閉函數
        this.tit = obj.tit;
    }
    winform.prototype = {
        //初始化
        init: function () {
            var ts = this;
            var htmlall = ts.htmlwin.replace('{$html}', ts.htmltemp);
            $("body").append(htmlall);
            ts._$mask = $(ts._$mask);
            ts._$p_box = $(ts._$p_box);
            ts.$z_box = $(ts.$z_box);
            ts._$p_box_mask = $(ts._$p_box_mask);
            $(".win-close").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                ts._$p_box.animate({
                    marginTop: -1000
                }, 500, 'swing', function () {
                    ts.hide_box();//消滅box
                    ts.fn_close();//執行關閉函數
                });
            }).mousedown(function (e) {
                e.stopPropagation();
            });
            $(".tit-text").text(ts.tit);
            ts.css();
        },
        //自動調整
        css: function () {
            var ts = this;
            ts._$p_box.show();//
            ts._pwidth = ts.children_w + ts._p_maring_w * 2 + ts._p_border_w * 2;
            ts._pheight = ts.$z_box.outerHeight(true) + ts._p_maring_w * 2 + ts._p_border_w * 2 + titbox_height;
            ts._$p_box.width(ts._pwidth).height(ts._pheight);//設置高寬;
            ts._$p_box_mask.width(ts._pwidth).height(ts._pheight);//設置高寬;
            ts.left_top();
        },
        //消滅容器
        hide_box: function (fn) {
            var ts = this;
            ts.add_fn = null;
            ts._$p_box.hide();//
            ts._$mask.hide();//
            ts._$p_box.remove();
            ts._$mask.remove();
            if (typeof fn == 'function') {
                fn();
            }
        },
        //自動居中
        left_top: function () {
            var ts = this;
            var height_1 = document.documentElement.scrollHeight || document.body.scrollHeight;//內容高度
            var clheight = document.documentElement.clientHeight || document.body.clientHeight; //當前可視高度
            if (height_1 < clheight) {//當內容高度小於可視高度時
                height_1 = clheight;
                ts._$mask.height(height_1);//設置遮罩層高度
            }
            else {
                ts._$mask.height(height_1);
            }
            var _width = document.documentElement.scrollWidth || document.body.scrollWidth;
            var _width2 = document.documentElement.clientWidth || document.body.clientWidth;
            if (_width2 < _width) {//當可視寬度小於內容寬度時
                ts._$mask.width(_width);//設置遮罩層高度
            }
            else {
                ts._$mask.css("width", "100%");//設置遮罩層寬度
            }
            var _top = document.documentElement.scrollTop || document.body.scrollTop; //當前滾動條滾動高度
            var h1 = ts._pheight;
            var w1 = ts._pwidth;
            if (h1 > clheight) {//當可視高度太低時將position：absolute
                if (height_1 <= h1) ts._$mask.height(h1);
                ts._$p_box.css({ "position": "absolute", "top": _top + "px", "left": _width / 2 - (w1 / 2) + "px" });
                if (h1 < height_1) {
                    if ((h1 + _top) > height_1) {
                        ts._$p_box.css({ "position": "absolute", "top": height_1 - h1 + "px", "left": _width / 2 - (w1 / 2) + "px" });
                    }
                }
                else {
                    ts._$p_box.css({ "position": "absolute", "top": 0 + "px", "left": _width / 2 - (w1 / 2) + "px" });
                }
            }
            else {
                if (h1 > height_1) {//當內容高度小於彈出窗口高度
                    ts._$p_box.css({ "position": "absolute", "top": _top + "px", "left": _width / 2 - (w1 / 2) + "px" })
                }
                else {
                    ts._$p_box.css({ "position": "absolute", "top": (clheight / 2 - h1 / 2) + _top + "px", "left": _width / 2 - (w1 / 2) + "px" });
                }
            }
            ts.show();
        },
        //繪製顯示
        show: function () {
            var ts = this;
            ts._$p_box.css({ "margin-top": "-1000px" });
            ts._$p_box.animate({
                marginTop: 0
            }, 500, 'swing');
            ts._$mask.show();//
            ts.fn.call(ts, function () {
                ts.hide_box();//返回關閉窗口的方法
            });
            ts.add_fn();
        },
        add_fn: function () {
            var movethis = this;
            dra_list_win.config.dom = $(movethis._$p_box)[0];
            dra_list_win.config.dom1 = $("div.win-tit")[0];
            dra_list_win.config.domw = $(movethis._$p_box)[0].scrollWidth;
            dra_list_win.config.domh = $(movethis._$p_box)[0].scrollHeight;
            dra_list_win.init();
        },
        un_end: function () {
        }
    }

    ///已有窗體顯示
    var winform2 = function (obj) {
        this._$mask1 = ".win-mask";//遮罩層
        this._$mask = ".win-mask";//遮罩層
        this._$p_box = ".win-mould";//box層
        this.$z_box = obj.$dom //".shelter";//包容層
        this._$p_box_mask = ".win-mask2";//內部遮罩層
        this.htmltemp = obj.html;//;//包容html
        this.htmlwin = '<div class="win-mask"style="width:100%;height:100%;background:#000;position:absolute;z-index:7000;top:0px;left:0px;opacity:0.45;filter:alpha(opacity=45);display:none;"></div>';//boxhtml
        this.children_w = obj.w//380;//嵌套寬度
        this.children_h = obj.h;//嵌套高度
        this._p_border_w = 1;//box邊框
        this._p_maring_w = 0;//box邊距
        this._p_paddint_w = 0;//box內邊距
        this._pheight = 0;//計錄窗口高度
        this._pwidth = 0;
        this.fn = obj.fn;//回調函數
        this.fn_close = obj.fn2;//function () { };//關閉函數
        this.tit = obj.tit;
    }
    winform2.prototype = {
        //初始化
        load: function () {
            var ts = this;
            $(".win-close").click(function (e) {
                ts._$p_box.animate({
                    marginTop: -1000
                }, 500, 'swing', function () {
                    ts.hide_box();//消滅box
                    ts.fn_close();//執行關閉函數
                });
            }).mousedown(function (e) {
                e.stopPropagation();
            });
        },
        //初始化
        pop_up: function () {
            var ts = this;
            var htmlall = ts.htmlwin;
            $("body").append(htmlall);
            ts._$mask = $(ts._$mask1);
            ts._$p_box = $(ts._$p_box);
            ts.$z_box = $(ts.$z_box);
            ts.css();
        },
        //自動調整
        css: function () {
            var ts = this;
            ts._$p_box.show();
            ts.children_w=ts.$z_box.outerWidth(true)>ts.children_w?ts.$z_box.outerWidth(true):ts.children_w;
            ts._pwidth = ts.children_w + ts._p_maring_w * 2 + ts._p_border_w * 2;
            ts._pheight = ts.$z_box.outerHeight(true) + ts._p_maring_w * 2 + ts._p_border_w * 2 + titbox_height;
            ts._$p_box.width(ts._pwidth).height(ts._pheight);//設置高寬;
            ts.left_top();
        },
        //消滅容器
        hide_box: function (fn) {
            var ts = this;
            ts._$mask.hide();
            ts._$mask.remove();
            if (typeof fn == 'function') {
                fn();
            }
        },
        //自動居中
        left_top: function () {
            var ts = this;
            var height_1 = document.documentElement.scrollHeight || document.body.scrollHeight;//內容高度
            var clheight = document.documentElement.clientHeight || document.body.clientHeight; //當前可視高度
            if (height_1 < clheight) {//當內容高度小於可視高度時
                height_1 = clheight;
                ts._$mask.height(height_1);//設置遮罩層高度
            }
            else {
                ts._$mask.height(height_1);
            }
            var _width = document.documentElement.scrollWidth || document.body.scrollWidth;
            var _width2 = document.documentElement.clientWidth || document.body.clientWidth;
            if (_width2 < _width) {//當可視寬度小於內容寬度時
                ts._$mask.width(_width);//設置遮罩層高度
            }
            else {
                ts._$mask.css("width", "100%");//設置遮罩層寬度
            }
            var _top = document.documentElement.scrollTop || document.body.scrollTop; //當前滾動條滾動高度
            var h1 = ts._pheight;
            var w1 = ts._pwidth;
            if (h1 > clheight) {//當可視高度太低時將position：absolute
                if (height_1 <= h1) ts._$mask.height(h1);
                ts._$p_box.css({ "position": "absolute", "top": _top + "px", "left": _width / 2 - (w1 / 2) + "px" });
                if (h1 < height_1) {
                    if ((h1 + _top) > height_1) {
                        ts._$p_box.css({ "position": "absolute", "top": height_1 - h1 + "px", "left": _width / 2 - (w1 / 2) + "px" });
                    }
                }
                else {
                    ts._$p_box.css({ "position": "absolute", "top": 0 + "px", "left": _width / 2 - (w1 / 2) + "px" });
                }
            }
            else {
                if (h1 > height_1) {//當內容高度小於彈出窗口高度
                    ts._$p_box.css({ "position": "absolute", "top": _top + "px", "left": _width / 2 - (w1 / 2) + "px" })
                }
                else {
                    ts._$p_box.css({ "position": "absolute", "top": (clheight / 2 - h1 / 2) + _top + "px", "left": _width / 2 - (w1 / 2) + "px" });
                }
            }
            ts.show();
        },
        //繪製顯示
        show: function () {
            var ts = this;
            ts._$p_box.css({ "margin-top": "-1000px" });
            ts._$p_box.animate({
                marginTop: 0
            }, 500, 'swing');
            ts._$mask.show();
            ts.fn.call(ts, function () {
                ts.hide_box();
            });
            ts.add_fn();
        },
        add_fn: function () {
            var movethis = this;
            dra_list_win.config.dom = $(movethis._$p_box)[0];
            dra_list_win.config.dom1 = $("div.win-tit")[0];
            dra_list_win.config.domw = $(movethis._$p_box)[0].scrollWidth;
            dra_list_win.config.domh = $(movethis._$p_box)[0].scrollHeight;
            dra_list_win.init();
        },
        unload: function () {
            var ts = this;
            ts._$p_box.animate({
                marginTop: -1000
            }, 500, 'swing', function () {
                ts.hide_box();//消滅box
                ts.fn_close();//執行關閉函數
            });
        }
    }

    ///拖拽
    var dra_list_win = {
        //初始化
        config: {
            dom: '',// document.getElementById("drafting"),//拖拽容器
            dom1: '',// document.getElementById("dramove"),//拖拽dom
            domw: 0,// document.getElementById("drafting").scrollWidth,
            domh: 0,// document.getElementById("drafting").scrollHeight,
            startleft: 0,//起始left位置
            starttop: 0,//起始top位置
            endleft: 0,//結束left位置
            endtop: 0,//結束top位置
            x: 0,//鼠標相對窗口x座標
            y: 0,//鼠標相對窗口y座標
            clientX: 0,//起始鼠標位置
            clientY: 0//起始鼠標位置
        },
        clearselect: window.getSelection ? function () { window.getSelection().removeAllRanges(); } : function () { document.selection.empty(); },//清空用戶文體選中
        //事件綁定
        init: function () {
            var ts = this;
            ts.config.dom1.onmousedown = function (e) {
                $(".win-iframe").show();
                ts.config.startleft = ts.config.dom.offsetLeft;//防止其餘函數改變位置
                ts.config.starttop = ts.config.dom.offsetTop;//防止其餘函數改變位置
                ts.config.domw = ts.config.dom.scrollWidth;
                ts.config.domh = ts.config.dom.scrollHeight;
                e = e || window.event;
                ts.config.clientX = e.clientX;
                ts.config.clientY = e.clientY;
                ts.config.x = ts.config.clientX - ts.config.startleft;
                ts.config.y = ts.config.clientY - ts.config.starttop;
                //設置捕獲範圍
                if (ts.config.dom.setCapture) {
                    ts.config.dom.setCapture();
                }
                else {
                    if (window.captureEvents) {
                        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
                    }
                }
                document.body.style.MozUserSelect = "none";
                document.onselectstart = function () { return false; };
                document.onmousemove = function (e) {
                    ts.movestart(e || window.event);
                }
                document.onmouseup = function (e) {
                    $(".win-iframe").hide();
                    ts.moveend(e || window.event);
                }
                if (navigator.userAgent.indexOf('Firefox') >= 0) { return false; }
            };
        },
        movestart: function (e) {
            var ts = this;
            e = e || window.event;
            var x = ts.config.clientX - e.clientX;//x移動距離
            var y = ts.config.clientY - e.clientY;//y移動距離
            ts.config.endleft = ts.config.startleft - x;
            ts.config.endtop = ts.config.starttop - y;
            //document.getElementById("span").innerText = ts.config.endleft + "," + ts.config.endtop;

            var height_1 = document.documentElement.scrollHeight || document.body.scrollHeight;//內容高度
            var clienth = document.documentElement.clientHeight || document.body.clientHeight; //當前可視高度
            if (height_1 > clienth) {//當內容高度小於可視高度時
                clienth = height_1;
            }
            var _width = document.documentElement.scrollWidth || document.body.scrollWidth;
            var clientw = document.documentElement.clientWidth || document.body.clientWidth;
            if (_width > clientw) {
                clientw = _width;
            }
            if ((ts.config.endleft + ts.config.domw) >= clientw) {
                ts.config.endleft = clientw - ts.config.domw;
            }
            if ((ts.config.endtop + ts.config.domh) >= clienth) {
                ts.config.endtop = clienth - ts.config.domh;
            }

            ts.config.endleft = ts.config.endleft <= 0 ? 0 : ts.config.endleft;
            ts.config.endtop = ts.config.endtop <= 0 ? 0 : ts.config.endtop;

            ts.config.dom.style.left = ts.config.endleft + "px";
            ts.config.dom.style.top = ts.config.endtop + "px";
            e.preventDefault ? e.preventDefault() : e.returnValue = false;
            return false;
        },
        moveend: function (e) {
            e = e || window.event;
            //設置捕獲範圍
            var ts = this;
            if (ts.config.dom.setCapture) {
                ts.config.dom.releaseCapture();
            }
            else {
                if (window.captureEvents) {
                    window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP)
                }
            }
            document.onselectstart = function () { return true; };
            document.body.style.MozUserSelect = "";
            ts.config.startleft = ts.config.endleft;//記錄結束left位置
            ts.config.starttop = ts.config.endtop;//記錄結束top位置
            document.onmousemove = null;
            document.onmouseup = null;
            return false;
        }
    }
})(window, $);
///系統窗體提示

　　使用：

調用1：

new WF.winform({
tit: '標題',
$dom: '.box',
html:‘html字符串’,
w: 880,
fn: function (fn) {  },//進入後執行的回調事件

fn2: function () {  },//結束回調事件

h: 480
}).init();



調用2：頁面添加html模板
<div class="win-mould" style="display:none;">
<div class="win-content">
<div class="win-tit">
<p class="tit-text" id="win-tit-text" style="float:left">添加公司帳號</p><a href="javascript:void(0)" class="win-close"></a>
</div>
<div class="win-html">
<!--內容-->
<div class="win-iframe"></div>
</div>
</div>
</div>

var winformbox = WF2.winform({
    $dom: '.box',
    fn: function (fn) {},//進入後執行的事件
    fn2: function () {},//結束時執行的事件
    w: 1173
});
//調用1
winformbox.pop_up();//顯示窗體

//調用2
winformbox.unload();//關閉窗體//清除窗體