HTML笔记——机柜、服务器的拖拽放置（iframe层，drappable,droppable，）

！！用的是VS2010，要在服务器上运行！！

！！直接打开静态HTML会报错：jquery.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame.！！

全部代码文件：

链接：https://pan.baidu.com/s/1qmXqYOMJ9LV7z26R-sB61Q
提取码：5566

实现功能

1、动态增加机柜（ID、名称、长宽高）；

点击添加按钮调用add()方法：增加div，弹出layer弹窗（iframe层，输入机柜信息），调用a()拖拽放置服务器、b()删除服务器方法；
点击layer弹窗save按钮，信息传入父页面。

2、拖拽、放置服务器（ID、名称、高、简介、所在机柜ID）；

a()方法：拖拽左侧元素置于放置区（机柜）处：触发ondrop回调函数，判断该机柜的服务器及拖入服务器高度是否>机柜
- 服务器>机柜
  - 放置区（机柜）状态置为“不可放置”；
  - 提示当前放置区（机柜）剩余高度。
- 服务器<机柜（判断服务器弹窗是否打开）
  - 弹窗关闭（判断拖放的元素（服务器）的源）
    - 从别的放置区（机柜）拖入
      - 当前放置区（机柜）接收；
      - 更改元素（服务器）的所在放置区（机柜）ID。
    - 从左侧拖入
      - 给元素（服务器）添加css样式、属性id、双击事件；
      - 弹出layer弹窗（iframe层），输入并保存数据
        
        success回调函数给子页面（iframe层）传入默认数值；
        
        子页面（iframe层）点击save之后给父页面传值；
        
        end回调函数在子页面关闭后提示“保存成功”，并给标记传值。
  - 弹窗打开
    - 放置区（机柜）状态置为“不可放置”；
    - 提示“请先保存”。

3、删除机柜、服务器（）;

删除机柜
- layer弹窗提示确定、取消
  - 确定：remove选择框为“checked”状态的div。
b()方法删除服务器
- 设置左侧为放置区，只接受class=“.assigned”的元素；
- ondrop执行删除。

4、机柜、服务器的双击事件（获取页面信息传入子页面的input）；

获取页面信息；
传入子页面（layer的iframe层）；
子页面save后更新父页面信息。

5、生成json数据。

通过Json方式定义一个函数对象，创建新数组；
循环获取机柜信息
- 循环获取当前机柜下的服务器信息，存入数组
存入数组（数组名.push(对象名)）；
存入json（json对象['名称']=数组名）；
将JSON对象转成字符串（JSON.stringify()）
打印字符串（console.log()）。

父页面

<body>
<div>
    <div class="left">
        <p hidden="hidden" id="port_name"></p>
        <!--机柜、服务器判断是否保存-->
        <input id="handle" name="handle" value="" hidden="hidden"/>
        <input id="gui" name="gui" value="" hidden="hidden"/>
        <input id="handle_sever" name="handle_sever" value="" hidden="hidden"/>
        <input id="sever" name="sever" value="" hidden="hidden"/>
        <!--增加、删除-->
        <a href="javascript:save();" title="保存为json"><img alt="" src="image/save.png" /></a>
        <a href="javascript:add();" title="增加机柜"><img alt="" src="image/add.png" /></a>
        <a href="javascript:del_gui();"><img alt="" src="image/delete.png" title="点击删除选中机柜，服务器拖到这里删除" onclick="del_gui()"/></a>
        <!--拖拽元素-->
        <div class="add_sever">
            <p>服务器</p>
            <p class="tips">(高度可自定)</p>
        </div>
        <div class="s">
            <div class="sever kong">间隔<p class="hid">1u</p><p class="hid">1</p></div>
        </div>
        <div class="s">
            <div class="sever1 sever" title="" >1u<p class="hid">1u</p><p class="hid">1</p></div>
        </div>
        <div class="s">
            <div class="sever2 sever" title="">2u<p class="hid">2u</p><p class="hid">2</p></div>
        </div>
        <div class="s">
            <div class="sever3 sever" title="">3u<p class="hid">3u</p><p class="hid">3</p></div>
        </div>
        <div class="s">
            <div class="sever12 sever" title="">12u<p class="hid">12u</p><p class="hid">12</p></div>
        </div>
        <div class="s">
            <div class="sever12 sever" title="">20u<p class="hid">20u</p><p class="hid">20</p></div>
        </div>
        <div class="s">
            <div class="sever12 sever" title="">30u<p class="hid">20u</p><p class="hid">30</p></div>
        </div>
        
    </div>
    <div class="right" id="right">
    </div>
</div>
</body>

父页面

父页面js

var i=1;
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    
    //添加div（机柜）
    function add() { 
        var gui=$("#gui").val();
        if (gui == "") {
            var Odiv = document.createElement("div");
            Odiv.className = "drop";
            Odiv.id = "drop" + i;
            Odiv.innerHTML = "<input type='checkbox' name='ji_gui' />";//选择框
            //放置区
            var divD = document.createElement("div"); 
            divD.className = "drop_area";
            divD.id = "drop_area";
            //机柜名称
            var pD = document.createElement("p");
            pD.className = "drop_name";
            pD.id = "drop_name" + i;
            pD.title = "drop_name" + i;
            pD.innerText = i;

            var event = document.createAttribute("ondblclick");//创建双击事件
            event.nodeValue = "dbl_gui(this)";
            pD.attributes.setNamedItem(event);//名称添加双击事件
            
            Odiv.appendChild(pD);//在drop里添加drop_name
            Odiv.appendChild(divD);//在drop里添加drop_area
            document.getElementById("right").appendChild(Odiv);//在右边right内创建一个div（drop）
            
            //layer弹窗
            layer.open({
                type: 2, //iframe
                title: '机柜信息-' + i,
                shadeClose: true,
                shade: false,
                cancel: function () {
                    layer.msg("请先保存！", {
                        icon: 7,
                        time: 700
                    });
                    return false;
                },
                maxmin: true, //开启最大化最小化按钮
                area: ['300px', '260px'],
                content: 'HTMLPage2.htm',
                success: function (layero, index) {
                    $("#gui").attr("value", 1);
                    var id = i-1;
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    //console.log(body.html());
                    body.find('input:eq(0)').val("机柜-" + id);
                    body.find('input:eq(1)').val("40");
                    body.find('input:eq(2)').val("60");
                    body.find('input:eq(3)').val("100");
                    body.find('input:eq(4)').val(id);
                },
                end: function () {
                    var handle = $("#handle").val();
                    if (handle == 1) {
                        layer.msg('保存成功', {
                            icon: 1,
                            time: 700 //2秒关闭（如果不配置，默认是3秒）
                        },
                            function () {
                                $("#handle").attr("value", "");
                                $("#gui").attr("value", "");
                            }
                        )
                    } //if END
                } //end END
            });//layer END
            i++;
            a();
            b();
            //alert(data_gui);
        }//if END
        else{
            layer.msg("请先保存！", {
                icon: 7,
                time:700
            });
        } 
    };

添加机柜

var aa=1;
    var a = function () {
        //拖拽
        $('.left .sever').draggable({
            revert: true,
            proxy: 'clone',
            deltaX: -40,
            deltaY: -10,
            onDrag: function (e) {
                $('.right div.drop_area').droppable("enable"); //重置放置区为可放置状态
                //$(this).click = dbclick;
            }
        });
        //放置
        $('.right div.drop_area').droppable({
            accept: '.sever', //只接受class为sever的元素
            onDragEnter: function (e, source) {
                $(this).addClass('over');
                $('.right div.drop_area').droppable("enable"); //重置放置区为可放置状态
            },
            onDragLeave: function (e, source) {
                $(this).removeClass('over');
                $('.right div.drop_area').droppable("enable"); //重置放置区为可放置状态
            },
            onDrop: function (e, source) {
                var parent_id = $(this).parent().attr("id"); //
                var r_parent_id = /drop(d+)/; //正则表达式

                var size = $(this).siblings("p").attr("title");
                var p_id = r_parent_id.exec(parent_id)[1];
                var r = /.*?(d+).*?(d+).*?(d+).*?/; //正则表达式
                var parent_height = r.exec(size)[1]; //正则匹配机柜高
                var attr = new Array(); //数组存放该机柜this的服务器div
                var r = /(?(d+)u?)?/; //正则表达式
                var source_html = $(source).find("p:eq(1)").html(); //拖动的服务器
                var source_height = r.exec(source_html)[1];
                var source_h = parseFloat(source_height); //转换为数值格式
                var i2 = $(this).unbind("each").find('div .h').each(function (i) {
                    var ii = $(this).html();
                    var height = r.exec(ii)[1];
                    attr[i] = height; //存入数组
                });
                var sum = eval(attr.join("+")) + source_h; //机柜服务器+拖动的服务器 的和
                if (sum > parent_height) {//判断和是否大于40u
                    layer.msg("当前机柜剩余高度：" + (parent_height - eval(attr.join("+"))) + "u", { time: 1000 });
                    $(this).droppable("disable"); //放置区不可放置
                } else {
                    var sever = $("#sever").val();
                    if (sever == "") {//判断layer弹窗是否打开
                        $(this).removeClass('over');
                        if ($(source).hasClass('assigned')) {
                            $(this).append(source);
                            $(source).find("p:eq(2)").html(p_id);
                            layer.close();
                        }
                        else {
                            var c = $(source).clone().addClass('assigned'); //克隆拖动元素的信息，并加class
                            if (c.hasClass('kong')) {
                                c.addClass('kong_drop');
                                c.html("<p hidden='hidden'>空格</p><p hidden='hidden' class='h'>1</p>");
                                $(this).append(c);
                                c.draggable({
                                    revert: true
                                });
                            } else {
                                c.attr('id', aa); //给元素加ID
                                c.attr('ondblclick', "dbl(this)"); //添加双击事件
                                $(this).append(c);
                                c.draggable({
                                    revert: true
                                });
                                //layer弹窗-新建服务器sever
                                layer.open({
                                    type: 2, //iframe
                                    title: '服务器信息-' + aa,
                                    shadeClose: true,
                                    shade: false,
                                    cancel: function (index) {
                                        layer.msg("确定不保存？", {
                                            icon: 7,
                                            time: 4000,
                                            btn: ['确定', '取消'],
                                            yes: function () {
                                                $("#sever").attr("value", "");
                                                c.remove();
                                                layer.close(layer.index); //关闭最新的弹窗（msg）
                                                layer.close(index);
                                            }
                                        });
                                        return false;

                                    },
                                    maxmin: true, //开启最大化最小化按钮
                                    area: ['400px', '380px'],
                                    content: 'sever.htm',
                                    success: function (layero, index) {

                                        var id = c.attr("id"); //该服务器ID
                                        $("#sever").attr("value", 1);
                                        var body = layer.getChildFrame('body', index);
                                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                                        //console.log(body.html());
                                        var height = $("#" + id).find('p:eq(1)').text();
                                        body.find('input:eq(1)').val("服务器-" + id);
                                        body.find('input:eq(3)').val(height);
                                        body.find('input:eq(4)').val(p_id);
                                        body.find('input:eq(5)').val(id);
                                        body.find('input:eq(6)').val("0");
                                        body.find('p:eq(0)').text(parent_height);
                                        body.find('p:eq(1)').text(eval(attr.join("+")));

                                    },
                                    end: function () {
                                        var handle_sever = $("#handle_sever").val();
                                        if (handle_sever == 1) {
                                            layer.msg('保存成功', {
                                                icon: 1,
                                                time: 700 //1秒关闭（如果不配置，默认是3秒）
                                            },
                                            function () {
                                                $("#handle_sever").attr("value", "");
                                                $("#sever").attr("value", "");
                                            }
                                        )
                                        }; //if、else结束（判断拖拽元素的源）

                                    } //end 结束
                                }); //layer结束
                                aa++;
                                $("#" + aa).text();
                            };
                        }; //if、else结束（判断拖拽元素的源）
                    } else {
                        $('.right div.drop_area').droppable("disable"); //放置区不可放置
                        layer.msg("请先保存！", { icon: 7, time: 700 });
                    } //if、else结束（判断是否弹窗打开）
                } //if、else结束（判断机柜服务器的高的和）
            } //onDrop-结束
        }); //droppable-结束
    };                           //a拖拽放置服务器-结束

拖拽放置服务器

//删除服务器
    var b = function () {
        /**右  -->  左(移除)*/
        $('.right div').draggable({
            revert: true
        });
        $('.left').droppable({
            accept: '.assigned',
            onDragEnter: function (e, source) {
                $(source).addClass('trash');
            },
            onDragLeave: function (e, source) {
                $(source).removeClass('trash');
            },
            onDrop: function (e, source) {
                $(source).remove();
            }
        });
    };

    //删除机柜
    function del_gui() {
        var checked = $("input[name='ji_gui']:checked");
        if (checked.length == 0) {
            layer.msg('未选中机柜！', {
                time: 0,
                btn: ['确定'],
                yes: function (index) {
                    layer.close(index);
                    return false;
                }
            })
        } else {
            var name_list = new Array();
            checked.siblings('p').each(function () {
                var name = $(this).text();
                name_list.push(name);
            });
            layer.msg('确定删除以下机柜？</br> ' + name_list, {
                time: 0, //不自动关闭弹窗
                btn: ['确定', '取消'],
                yes: function (index) {
                    checked.parent().remove();
                    layer.close(index); //关闭弹窗
                },
                btn2: function () {
                    layer.close(index);
                }
            })
        }
    };

删除机柜、服务器

//机柜双击事件
    function dbl_gui(obj_gui) {
        var att = $(obj_gui).attr('id'); //获取当前ID
        var id = att.split("name")[1];
        var size = $(obj_gui).attr("title");
        var name = $(obj_gui).html();
        var r = /.*?(d+).*?(d+).*?(d+).*?/; //正则表达式
        var height = r.exec(size)[1]; //正则匹配高
        var weight = r.exec(size)[2]; //宽
        var depth = r.exec(size)[3]; //深
        //alert(weight+depth);
        //layer2弹窗
        layer.open({
            type: 2, //iframe
            title: '机柜信息-' + id,
            shadeClose: true,
            shade: false,
            cancel: function () {
                $("#gui").attr("value", "");
                layer.close();
            },
            maxmin: true, //开启最大化最小化按钮
            area: ['300px', '260px'],
            content: 'ji_gui.htm',
            success: function (layero, index) {
                
                $("#gui").attr("value", 1);
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                //console.log(body.html());
                body.find('input:eq(0)').val(name); //名称
                body.find('input:eq(1)').val(height); //高
                body.find('input:eq(2)').val(weight);//宽
                body.find('input:eq(3)').val(depth);//深
                body.find('input:eq(4)').val(id);//ID
            },
            end: function () {
                var handle = $("#handle").val();
                if (handle == 1) {
                    layer.msg('保存成功', {
                        icon: 1,
                        time: 700 //1秒关闭（如果不配置，默认是3秒）
                        },
                        function () {
                            $("#handle").attr("value", "");
                            $("#gui").attr("value", "");
                        }
                     )
                } //end的if结束
            } //layer的end 结束
        }); //layer2结束            
    } //机柜双击事件结束

    //服务器双击事件
    function dbl(obj) {
        var id = $(obj).attr('id'); //获取当前ID
        var name = $(obj).find('p:eq(0)').html(); //名称
        var oheight = $(obj).find('p:eq(1)').html(); //获取高的字符串
        var r = /(?(d+)u?)?/; //正则表达式
        var height = r.exec(oheight)[1]; //正则匹配取出数字
        var intro = $(obj).attr('title'); //简介*/
        //机柜ID
        var parent_id = $(obj).parent().parent().attr("id") ;
        var r_parent_id = /drop(d+)/; //正则表达式
        var p_id = r_parent_id.exec(parent_id)[1];
        //机柜高
        var parent_height = $(obj).parent().siblings('p').attr("title");
        var r_parent_height= /.*?(d+).*?(d+).*?(d+).*?/; //正则表达式
        var p_height = r_parent_height.exec(parent_height)[1]; //正则匹配高
        //机柜服务器的高的和
        var attr = new Array();
        var i2 = $(obj).parent().unbind("each").find('div .h').each(function (i) {
            var ii = $(this).html();
            var height = r.exec(ii)[1];
            attr[i] = height; //存入数组
        });
        var h = parseFloat(height); //转换为数值格式
        var sever_sum = eval(attr.join("+")) - h;
        //类型
        var otype = $(obj).find('p:eq(3)').html(); 
        var r_type = /type:(.+)/;
        var type = r_type.exec(otype)[1];
        //端口
        var port = $(obj).find('p:eq(4)').html();
        var r_port = /port_num:(d+);port_name:(.+?)./;
        var port_num = r_port.exec(port)[1];
        var port_name = r_port.exec(port)[2];
        var n = port_name.split(",");
        //layer2弹窗
        layer.open({
            type: 2, //iframe
            title: '服务器信息-' + id,
            shadeClose: true,
            shade: false,
            cancel: function () {
                $("#sever").attr("value", "");
                layer.close();
            },
            maxmin: true, //开启最大化最小化按钮
            area: ['400px', '380px'],
            content: 'sever.htm',
            success: function (layero, index) {
                $("#sever").attr("value", 1);
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

                body.find('input:eq(1)').val(name); //名称
                body.find('input:eq(3)').val(height); //高
                body.find('textarea:eq(0)').val(intro); //简介
                body.find('input:eq(6)').val(port_num);
                body.find('input:eq(4)').val(p_id); //放置区（机柜）ID
                body.find('input:eq(5)').val(id); //服务器severID
                body.find('p:eq(0)').text(p_height); //机柜高
                body.find('p:eq(1)').text(sever_sum);
                if (type == "机架式" || type == "存储" || type == "防火墙" || type == "路由器" || type == "交换机" || type == "刀片式" || type == "塔式") {
                    body.find('select').val(type);
                } else {
                    body.find('select').val("其他");
                    body.find('input:eq(2)').show();
                    body.find('input:eq(2)').val(type);
                } //服务器类型

                if (port_num > 0) {
                    iframeWin.port_submit();//调用子页面方法
                    for (var x = 0; x < n.length; x++) {
                        body.find('input:eq(' + (x + 7) + ')').val(n[x]);
                    }
                }
            },
            end: function () {
                var handle_sever = $("#handle_sever").val();
                if (handle_sever == 1) {
                    layer.msg('保存成功', {
                        icon: 1,
                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                    },
                        function () {
                            $("#handle_sever").attr("value", "");
                            $("#sever").attr("value", "");
                        }
                    )
                } //end的if结束
            } //layer的end 结束
        });                   //layer2结束            
        } //sever服务器双击事件结束

双击事件

function save() {
        var json = {};
        var list_gui = [];//存放机柜信息
        var sever_number = [];//存放服务器数量
        $(".drop_name").each(function () {
            var obj = {};
            var idd = $(this).attr("id");
            var r_id = /drop_name(d+)/;
            var id = r_id.exec(idd)[1];
            var name = $(this).html();
            var size = $(this).attr("title");
            var r_size = /.*?(d+).*?(d+).*?(d+).*?/; //正则表达式
            var height = r_size.exec(size)[1]; //正则匹配高
            var weight = r_size.exec(size)[2]; //宽
            var depth = r_size.exec(size)[3]; //深
            var list_sever = []; //存放该机柜下的服务器信息

            $(this).siblings().children().each(function () {
                if ($(this).hasClass('kong_drop')) { 
                    return true;//跳过本次循环，不读取间隔
                }else{
                var obj_sever = {};
                var id = $(this).attr("id");
                var name = $(this).find('p:eq(0)').html(); //名称
                var oheight = $(this).find('p:eq(1)').html(); //获取高的字符串
                var r = /(?(.+?)u?)?/; //正则表达式
                var height = r.exec(oheight)[1]; //正则匹配取出数字
                var intro = $(this).attr('title'); //简介*/
                var parent_id = $(this).find('p:eq(2)').html(); //机柜ID

                var otype = $(this).find('p:eq(3)').html();
                var r_type = /type:(.+)/;
                var type = r_type.exec(otype)[1];//类型

                var port = $(this).find('p:eq(4)').html();
                var r_port = /port_num:(d+);port_name:(.+?)./;
                var port_num = r_port.exec(port)[1];//端口数量
                var port_name = r_port.exec(port)[2];//端口名称
                var n = port_name.split(",");

                obj_sever.id = id;
                obj_sever.name = name;
                obj_sever.height = height;
                obj_sever.introduce = intro;
                obj_sever.type = type;
                obj_sever.port_num = port_num;
                obj_sever.port_name = n;
                obj_sever.jigui_id = parent_id;
                list_sever.push(obj_sever);
                }
            })
            sever_number.push(list_sever.length);
            obj.id = id;
            obj.name = name;
            obj.height = height;
            obj.weight = weight;
            obj.depth = depth;
            obj.sever = list_sever;
            list_gui.push(obj);
        });

        json['jigui_number'] = list_gui.length;
        json['sever_number'] = eval(sever_number.join("+"));
        json['ji_gui'] = list_gui;
        var js = JSON.stringify(json, null, 2); //将JSON对象转成字符串
        console.log(js);
        
        //下载为json文件
        /*var Link = document.createElement('a');
        Link.download = "机柜信息.json";
        Link.style.display = 'none';
        // 字符内容转变成blob地址
        var blob = new Blob([js]);
        Link.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(Link);
        Link.click();
        // 然后移除
        document.body.removeChild(Link);*/
    }

保存为json

子页面（iframe层）

1、机柜

<head>
    <title></title>
    <link href="css/StyleSheet.css" type="text/css" rel="Stylesheet" />
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="layer_gui">
        <form method="post" id="form_gui" action="" runat="server">
            <div class="name_gui">
                <label>名称：</label><input name="name_gui" id="name_gui" type="text" required="true"/>
            </div>
            <div class="height_gui">
                <label>高度：</label>
                <input placeholder="单位：u" min="0" name="height_gui" id="height_gui" type="number" required="true"/>
            </div>
            <div class="weight_gui">
                <label>宽度：</label>
                <input placeholder="单位：cm" min="0" name="width_gui" id="width_gui" type="number" required="true"/>
            </div>
            <div class="depth_gui">
                <label>深度：</label>
                <input placeholder="单位：cm" min="0" name="depth_gui" id="depth_gui" type="number" required="true"/>
            </div>
            <div class="submit">
                <button id="btnsubmit" type="submit" value="提交">save</button>
            </div>
        </form>
        <input name="id" id="id" type="number" hidden="hidden" />
        <input name="index" id="index" type="number" hidden="hidden" />
    </div>

<script type="text/javascript">

    $(function () {
        $("button[type='submit']").click(function () {
            var h = 10;
            var w = 2.5;
            var index = parent.layer.getFrameIndex(window.name);
            var id = document.getElementById("id").value;
            var name = document.getElementById("name_gui").value;
            var height = document.getElementById("height_gui").value;
            var width = document.getElementById("width_gui").value;
            var depth = document.getElementById("depth_gui").value;
            if (name == "") {
                parent.layer.msg("请填写机柜！名称！", { time: 700 });
                return false;
            };

            //给父页面传值
            parent.$("#handle").attr("value", 1); //用以判断弹窗数据是否保存
            parent.$("#drop_name" + id).text(name);
            parent.$("#drop_name" + id).attr("title", '高：' + height + 'u;  宽：' + width + 'cm;  深：' + depth + 'cm');
            parent.document.getElementById("drop_area" + id).style.height = height * h + "px";
            parent.document.getElementById("drop_area" + id).style.width = width * w + "px";
            parent.document.getElementById("drop_name" + id).style.width = width * w-16 + "px";
            parent.layer.close(index);

            //  parent.location.reload(); // 父页面刷新  
        })
    })

    /*function cancelBack() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.$("#handle").attr("value", 2);
        parent.layer.close(index);
    }*/
</script>
</body>

layer-iframe层

2、服务器

<head>
    <title></title>
    <link href="css/StyleSheet.css" type="text/css" rel="Stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/icon.css"/>
    <link rel="Stylesheet" type="text/css" href="css/default/layer.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jscolor.js"></script>
    <script src="js/layer.js"></script>

</head>
<body>
    <div class="layer_sever">
        <form method="post" id="form_sever" action="" runat="server">
            <div class="name_sever">
                <label>名称：</label>
                <input class="jscolor {onFineChange:'update(this)'}" value="9e9e9e" />
                <input name="name_sever" id="name_sever" type="text" required="true"/>
            </div>
            <div class="type_sever">
                <label>类型：</label>
                <input type="text" name="type_sever" id="type_else" />
                <select id="type_sever" onchange="select()">
                    <option value="机架式">机架式</option>
                    <option value="塔式">塔式</option>
                    <option value="刀片式">刀片式</option>
                    <option value="交换机">交换机</option>
                    <option value="路由器">路由器</option>
                    <option value="防火墙">防火墙</option>
                    <option value="存储">存储</option>
                    <option value="其他">其他</option>
                </select>
                
            </div>
            <div class="height_sever">
                <label>高度：</label>
                <input placeholder="单位：u" min="0" name="height_sever" id="height_sever" type="number" required="true"/>
            </div>
            <div class="weight_sever">
                <label>简介：</label>
                <textarea placeholder="请输入服务器简介" cols="30" rows="5" name="introduce_sever" id="introduce_sever" required="true"></textarea>
            </div>
            <!--放置区（机柜）ID(4)隐藏-->
            <input name="parent_id" id="parent_id" required="true" hidden="hidden" />
            <!--服务器severID(5)隐藏-->
            <input name="id" id="id" type="number" hidden="hidden" />
            <div class="port_sever" id="port_sever">
                <label>端口数量：</label>
                <a name="port_num" href="javascript:port_submit();" type="button" id="port_submit">输入端口信息</a>
                <input name="port_num" id="port_num" type="number" min="0" required="true" />
            </div>
            

            <div class="submit">
                <button id="sever_submit" type="submit" value="提交">save</button>
            </div>
        </form>
        <p hidden="hidden" id="jigui_height"></p><!--存储机柜高度-->
        <p hidden="hidden" id="jigui_sever_height"></p><!--存储机柜服务器总高度-->
    </div>
    
<script type="text/javascript">
    $("#name_sever").focus();
    var index = parent.layer.getFrameIndex(window.name);
    $(function () {
        $("button[type='submit']").click(function () {
            var h = 10;
            var id = document.getElementById("id").value;
            var name = document.getElementById("name_sever").value;
            var height = document.getElementById("height_sever").value;
            var introduce = document.getElementById("introduce_sever").value;
            var parent_id = document.getElementById("parent_id").value;
            var port_num = document.getElementById("port_num").value;

            var jigui_height = $("#jigui_height").text();
            var jigui_sever_height = $("#jigui_sever_height").text();
            var remain = jigui_height - jigui_sever_height;
            if (name == "") {
                parent.layer.msg("请填写服务器！名称！", { time: 700 });
                return false;
            }; //名称为空提示“填写名称”
            if (height > remain) {
                parent.layer.msg("机柜当前剩余高度 " + remain + " u！", { time: 2000 });
                return false;
            }; //填入的高度>机柜剩余高度
            parent.$("#handle_sever").attr("value", 1);
            parent.$("#" + id).html("<p>" + name + "</p><br/><p class='h'>" + "(" + height + "u)</p><p hidden='hidden'>" + parent_id + "</p>");
            parent.$("#" + id).attr("title", introduce);
            //下拉选择框
            var select = document.getElementById("type_sever");
            var selected = select.selectedIndex;
            var selected_val = select.options[selected].value;
            var p1 = document.createElement("p");
            p1.hidden = "hidden";
            if (selected_val == "其他") {
                var type = document.getElementById("type_else").value;
                p1.innerHTML = "type:" + type;
            } else {
                p1.innerHTML = "type:" + selected_val;
            }
            parent.document.getElementById(id).appendChild(p1);
            //循环获取端口名称
            var port_list = [];
            $(".add_port").each(function () {
                var port_name = $(this).find("input").val();
                port_list.push(port_name);
            });
            //端口名称放入父页面
            var p2 = document.createElement("p");
            p2.hidden = "hidden";
            if (port_list == "") {
                p2.innerHTML = "port_num:" + port_num + ";port_name:暂无端口.";
            } else {
                p2.innerHTML = "port_num:" + port_num + ";port_name:" + port_list + ".";
            }
            parent.document.getElementById(id).appendChild(p2);
            parent.document.getElementById(id).style.height = height * h-2 + "px"; //动态改变高度

            parent.layer.close(index);
        })
    })
    //颜色插件
    function update(jscolor) {
        var id = document.getElementById("id").value;
        parent.document.getElementById(id).style.backgroundColor = '#' + jscolor;
    }
    //下拉选择
    $("#type_else").hide();
    function select() {
        var select = document.getElementById("type_sever");
        var selected = select.selectedIndex;
        var selected_val = select.options[selected].value;
        if (selected_val == "其他") {
            $("#type_else").show();
        } else { $("#type_else").hide(); }
    }
    
    //输入端口信息
    function port_submit() {
        var num = document.getElementById("port_num").value;
        if (num <1) {
            parent.layer.msg("端口数量为0！", { time: 700 });
            return false;
        } //端口数量为0提示
        else {
            var port_num = $(".add_port").length;
            for (var n = 1; n <= num; n++) {
                var div = document.createElement("div");
                div.className = "add_port";
                var label = document.createElement("label");
                label.innerHTML = "端口" + (n+port_num) + "：";
                var input = document.createElement("input");
                input.placeholder = "端口名称";
                input.id = "add_port" + n;
                var peizhi = document.createElement("div");
                peizhi.className = "peizhi_port";
                peizhi.innerText = "配置此端口信息";
                peizhi.id = n;
                var event = document.createAttribute("onclick");
                event.nodeValue = "peizhi_port(this)";
                peizhi.attributes.setNamedItem(event); 

                var del_port = document.createElement("div");
                del_port.className = "del_port";
                del_port.innerText = "删除";
                del_port.id = "del_port"+n;
                var event_del = document.createAttribute("onclick"); //创建双击事件
                event_del.nodeValue = "del_port(this)";
                del_port.attributes.setNamedItem(event_del); //名称添加双击事件

                div.appendChild(label);
                div.appendChild(input);
                div.appendChild(del_port);
                div.appendChild(peizhi);
                document.getElementById("port_sever").appendChild(div);
            }
            $("#port_submit").text("添加端口");
            $("#port_submit").on({
                mouseenter: function () {
                    layer.tips('添加(n)个端口，端口数量填写(n)', '#port_submit', {
                        tips: [1, '#504c4c'],
                        time: 0
                    })
                },
                mouseleave: function () {
                    layer.close(layer.index);
                }
            })
            var port_num = $(".add_port").length;
            $("#port_num").val(port_num);
            //点击除name=port_num之外的区域触发
            $('body').click(function (e) {
                if ($(e.target).attr('name') != 'port_num') {
                    $("#port_num").val(port_num);
                }
            });
        }
    }
    
    //配置端口信息
    function peizhi_port(port) {
        var name = $(port).siblings("input").val();
        var id = $(port).siblings("label").text();
        parent.layer.open({
            type: 2, //iframe
            title: '端口信息-' + id,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['380px', '310px'],
            content: 'port.htm',
            success: function (layero, index) {
                var body = parent.layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                body.find('input:eq(0)').val(name); //名称
            },
            end: function () {
                var name_update = parent.$("#port_name").text();
                $(port).siblings("input").val(name_update);
            }
        });
    }
    //删除服务器端口
    function del_port(port) {
        var name = $(port).siblings("input").val();
        var id = $(port).siblings("label").text();
        parent.layer.msg('确定删除端口-' + name + '-？', {
            time: 0, //不自动关闭弹窗
            btn: ['确定', '取消'],
            yes: function (index) {
                $(port).parent().remove();
                var port_num = $(".add_port").length;
                $("#port_num").val(port_num);
                var n = 1;
                $(".add_port label").each(function () {
                    $(this).text("端口" + n + "：");
                    n++;
                });
                parent.layer.close(index); //关闭弹窗
            },
            btn2: function () {
                layer.close(index);
            }
        })
    }
</script>

</body>

layer-iframe层

3、端口

<head>
    <title></title>
    <link href="css/StyleSheet.css" type="text/css" rel="Stylesheet" />
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="layer_port">
    <form method="post" id="form_port" action="" runat="server">
        <div class="name_port">
            <label>名称：</label>
            <input placeholder="请输入端口名称" name="name_port" id="name_port" type="text" required="true"/>
        </div>
        <div class="ip_port">
            <label>IP：</label>
            <input class="ip" name="ip_port" id="ip1_port" type="text" required="true"/>.
            <input class="ip" name="ip_port" id="ip2_port" type="text" required="true"/>.
            <input class="ip" name="ip_port" id="ip3_port" type="text" required="true"/>.
            <input class="ip" name="ip_port" id="ip4_port" type="text" required="true"/>
        </div>
        <div class="device_port">
            <label>对端设备：</label>
            <input placeholder="请输入对端设备" name="device_port" id="device_port" type="text" required="true"/>
        </div>
        <div class="introduce_port">
            <label>简介：</label>
            <textarea placeholder="请输入端口简介" cols="30" rows="5" name="introduce_port" id="introduce_port" required="true"></textarea>
        </div>
        <div class="submit">
            <button id="btnsubmit" type="submit" value="提交">save</button>
        </div>
    </form>
</div>
<script>
    var goal = ".ip";
    var ip_max = 255;

    // 监听键盘输入事件
    $(goal).bind("keydown", function (event) {
        //console.log($(this).attr("id"))
        var code = event.keyCode;
        // 只能输入数字键、删除键、小数点，tab键，其他的都不能输入
        if ((code < 48 && 8 != code && 37 != code && 39 != code && 9 != code && 13 != code) || (code > 57 && code < 96) || (code > 105 && 110 != code && 190 != code)) {
            return false;
        }
        // 如果输入了点 (.)，则直接跳转到下一个输入框
        if (code == 110 || code == 190 || code == 13) {
            $(this).next().focus();
            return false;
        }
    })
    // 监听键盘离开事件
    $(goal).bind("keyup", function(event){
    // 判断当前输入框的值
        var value = $(this).val();
    // 如果输入的值大于ip最大值，则去掉最后一位数字
        if(value != null && value != '' && parseInt(value) > ip_max) {
            value = value.substring(0, value.length-1);
            $(this).val(value);
            return false;
        }
    // 如果输入框的值大于100，并且符合规则，则跳转到下一个输入框
        if(value != null && value != '' && parseInt(value) > 100 && parseInt(value) <= ip_max) {
            $(this).next().focus();
            return false;
        }
    // 判断是否是0开头的不规范数字
        if(value != null && value != '' && parseInt(value) != 0) {
        // 如果当前输入的是0开头，则把0去掉,方法是直接转数字即可
            value = parseInt(value);
            if(isNaN(value)){
                $(this).val("");
            }else {
                $(this).val(""+value);
            }
        }
    })
    // IP失去焦点事件
    $(goal).bind("blur", function(){
        var value = $(this).val();
    // 如果失去焦点，当前的值为空，则加上红色边框，否则去掉红色边框
        if(value == null || value == '' || value == undefined) {
            $(this).css("border-color", "#F08080");
        }else {
            $(this).css("border-color", "");
        }
    })
    // 名称/对端设备—失去焦点事件
    $('input[name!=ip_port]').blur(function () {
        var val = $(this).val();
        if (val == "") {
            $(this).css("border-color", "#F08080");
        }
    })
    $("#name_port").focus();
    $("button[type='submit']").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        var name = document.getElementById("name_port").value;
        /*var device = document.getElementById("device_port").value;
        var ip1 = document.getElementById("ip1_port").value;
        var ip2 = document.getElementById("ip2_port").value;
        var ip3 = document.getElementById("ip3_port").value;
        var ip4 = document.getElementById("ip4_port").value;
        var ip = ip1 + "." + ip2 + "." + ip3 + "." + ip4;
        var introduce = document.getElementById("introduce_port").value;*/
        if (name == "") {
            parent.layer.msg("请填写端口！名称！", { time: 700 });
            return false;
        }; //名称为空提示“填写名称”
        parent.$("#port_name").text(name);
        parent.layer.close(index);
    })
</script>
</body>

layer-iframe层

CSS

body 
{
    margin:20px;
}
.left
{
    width:20%;
    height:auto;
    float:left;
    text-align:center;
    position:fixed;}
.right
{
    width:80%;
    height:auto;
    float:right;
    z-index:-1;}
.s
{
    margin:5px 0;}


/**移动选择（onDragEnter）背景色**/
.over
{
    background-color:#aac5e7;
    z-index:-1;}
/**放置后（onDrop）的样式**/
.assigned{
    border:1px solid #efefef !important;
}
/*间隔块*/
.kong
{
    height:17px;
    border:1px solid #1d1c1c;
    background-color:#1d1c1c !important;}
.kong_drop
{
    width:100% !important;
    margin:0;
    border:none !important;
    height:10px !important;}
/**放置区（机柜）**/
.drop_area{
    /*150px;*/
    border: 5px solid #bbb;
    border-style: inset;
    position:absolute !important;
    bottom:0px;
    z-index:1;
}
.drop_name
{
    text-align:center;
    float: right;
    width: 130px;
    margin-top: 0;
    }
.drop
{
    width:auto;
    margin-left:20px;
    margin-bottom:15px;
    float:left;
    height:520px;
    position:relative !important;
    left: 0 !important;
    top: 0px !important;
    z-index:0;}
/**拖动元素（服务器）**/

.add_sever
{
    margin:10px 0;}
.add_sever p
{
    margin:3px 0;}
.tips
{
    font-size:small;
    text-align:center;
    color: #9c2828;}
.sever
{
    text-align:center;
    width:140px;
    margin:auto;
    color: white;
    background-color: #9e9e9e;
    display: flex;
    justify-content:center;
    align-items:Center;
    z-index:999999;}
.sever1
{
    height:8px;
    border:1px solid black;
    }
.sever2
{
    height:18px;
    border:1px solid black;
    }
.sever3
{
    height:28px;
    border:1px solid black;
    }
.sever12
{
    height:118px;
    border:1px solid black;
    }

.sever .hid
{
    display:none;}
/********************弹出表单layer**************/
/*****机柜*****/
.layer_gui
{
    width:90%;
    margin:auto;
    margin-top: 20px;}
.layer_gui div
{
    margin:10px 0;
    height:25px;}
.layer_gui label
{
    
    width:30%}
.layer_gui input
{
    border-radius: 5px;
    height: 20px;
    border: 1px solid #827b7b;
    float:right;
    width:69.9%;}
.submit
{
    text-align:center;}
.submit button
{
    width: 30%;
    height: 29px;
    margin-top: 7px;
    background-color: #b5b3b3;
    float: none;
    border-radius: 10px;}
.submit button:hover
{
    background-color:Gray;
    color:White;}

/*******服务器*******/
#form_sever div
{
    float:left;
    width:100%;}
.layer_sever
{
    width:90%;
    margin:auto;
    margin-top: 20px;
    }
.name_sever,.height_sever
{
    margin:10px 0;
    height:25px;}
.layer_sever label
{
    width:30%}
.layer_sever input
{
    border-radius: 5px;
    height: 20px;
    border: 1px solid #827b7b;
    float:right;
    width:69.9%;}
.layer_sever input.jscolor
{
    width:17%;
    text-align: center;}
.layer_sever #name_sever
{
    width:51.9%;}
.layer_sever textarea
{
    border-radius: 5px;
    width:69%;
    border: 1px solid #827b7b;
    float:right;
    margin-bottom:10px;}
/**下拉选择框**/
.layer_sever select
{
    border-radius:5px;
    height: 23px;
    border: 1px solid #827b7b;
    width:22%;
    margin-left: 40px;}
.layer_sever .type_sever input
{
    width:46.9%;}
/**端口**/
.layer_sever .port_sever #port_num
{
    width:23%;}
.layer_sever .port_sever a
{
    text-decoration:none;
    border:1px solid #827b7b;
    border-radius:5px;
    width: 45%;
    float: right;
    margin-left: 1.9%;
    background-color: #afacac;
    color: #151414;
    text-align: center;}
.add_port
{
    margin:5px 0;
    }
.add_port label
{
    font-size:small;
    margin-left: 10%;
    margin-right: 4.5%;}
.add_port input
{
    width:23%;
    float:none}
.add_port .peizhi_port
{
    width: 30% !important;
    float: right !important;
    font-size: small;
    text-align: center;
    line-height: 22px;
    margin-right: 3%;}
.add_port .del_port
{
    font-size: small;
    float: right !important;
    width: 9% !important;
    text-align: center;
    line-height: 20px;
    background-color: #79786f;
    border-radius: 5px;
    color: white;}
/******port端口******/
#form_port div
{
    float:left;
    width:100%;
    margin:5px 0;}
.layer_port
{
    width:90%;
    margin:auto;
    margin-top: 20px;
    }
.name_port,.height_port
{
    
    height:25px;}
.layer_port label
{
    width:30%}
.layer_port input
{
    border-radius: 5px;
    height: 20px;
    border: 1px solid #827b7b;
    float:right;
    width:69.9%;}
.layer_port .ip_port label
{
    margin-right:19%;}
.layer_port .ip_port input
{
    display:inline;
    float:none;
    width:15.6%;
    text-align:center;
    margin-left: -4px;}
.layer_port textarea
{
    border-radius: 5px;
    width:69%;
    border: 1px solid #827b7b;
    float:right;
    margin-bottom:10px;}
.layer_port .submit button
{
    margin-top: -5px;}

View Code

效果图

双击服务器

修改端口数量、信息

双击机柜

删除机柜

新增机柜

拖拽服务器

输入端口信息

相关阅读:
从程序员到项目经理（13）：如何管理自己的时间（下）
从程序员到项目经理（11）：每个人都是管理者
 从程序员到项目经理（15）：项目管理三大目标
 程序员：伤不起的三十岁
 从程序员到项目经理（9）：程序员加油站再牛也要合群
 从程序员到项目经理（7）：程序员加油站完美主义也是一种错
 从程序员到项目经理（4）：外行可以领导内行吗
 ArcGIS API For Android离线地图的实现
 ArcGIS for Android地图控件的5大常见操作
 从程序员到项目经理（16）：原来一切问题都是可以解决的
原文地址：https://www.cnblogs.com/888abc/p/9956386.html