Html5和JQ实现拖拽网页发票布局

 1.上图整体工作流程，从工具栏出拖拽需要的标签，布局在网格处。在网格处进行随意摆放和改变大小，修改文字内容。

2.主要用到draggable（拖拽）、droppable（放置）、accordion（折叠面板）放法。借助jqueryui实现整体操作。

（此处没有借助折叠面板，知识样式需要）

3.主要代码：

    //指定元素为折叠面板
    $("#catalog").accordion();
    //指定可以被拖拽元素
    $(".labels").draggable({
        appendTo: "body",
        cursor: "pointer",
        helper: "clone",//元素将被克隆，且克隆将被拖拽
    });

4.拖拽放置逻辑：

 //拖拽布局操作
    var number = 0;
    $("#pageAreaWrapper .tuozhuai").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ".labels",//指定被拖拽元素可以放置。
        drop: function (event, ui) {
            var sourceElement = $(ui.helper.context);//获取拖拽的Dom结构
            var Name = sourceElement.attr("id");//获取Dom结构属性
            var Type = sourceElement.attr("data-type");//获取Dom结构属性 
            var divContent = sourceElement.find(".tle").text();//里面字体
            var ss = "";//添加事件结构字符串
            var Html = "";//拖拽以后生成dom字符串
            //（添加相对应拖拽结构,后修改）
            if (Type == "input") {
                Html += "<div  class=\"componentWrapper\" style=\"position: absolute; z-index: 101;\">";
                Html += "   <div class=\"shield tuo_grey\" style=\"position:absolute\"></div>";
                Html += "   <div class=\"wrapperBorder div_input\">";
                Html += "         <div class=\"wrapperContent tuo_input_div\" style=\"width:200px; height:30px; word-break:break-all\">";
                Html += "            <input type=\"text\" id=\"" + Name + "\" name=\"" + Name + "\"  class=\"tuo_input\" placeholder=\"" + divContent + "\" />";
                Html += "         </div>";
                Html += "   </div>";
                Html += "</div>";
                ss = $(Html);
            }
            else if (Type == "lable") {
                Html += "<div  class=\"lable_cove\" style=\"position: absolute; z-index: 101;\">";
                Html += "   <div class=\"shield tuo_grey\" style=\"position:absolute\"></div>";
                Html += "   <div class=\"wrapperBorder div_label \">";
                Html += "           <div class=\"wrapperContent tuo_label_div\">";
                Html += divContent;
                Html += "           </div>";
                Html += "   </div>";
                Html += "</div>";
                ss = $(Html);
            }
            else if (Type == "Hline") {
                Html += "<div id=\"Hline_" + ++number + "\" class=\"componentWrapperHline\" style=\"position: absolute; z-index: 101;\">";
                Html += "   <div class=\"shield tuo_grey\" style=\"position:absolute;margin-right: 20px;\"></div>"
                Html += "   <div class=\"wrapperBorder div_line\">";
                Html += "         <div class=\"wrapperContent tuo_Hline_div\" style=\"width:120px; height:1px; background:#000 !important; margin-left:20px; word-break:break-all\">";
                Html += "         </div>";
                Html += "   </div>";
                Html += "</div>";
                ss = $(Html);
            }
            else if (Type == "Vline") {
                Html += "<div id=\"Vline_" + ++number + "\" class=\"componentWrapperVline\" style=\"position: absolute; z-index: 101;\">";
                Html += "   <div class=\"shield tuo_grey\" style=\"position:absolute\"></div>"
                Html += "   <div class=\"wrapperBorder div_line\">";
                Html += "         <div class=\"wrapperContent tuo_Vline_div\" style=\"width:1px; height:120px;  background:#000 !important; margin-left:20px; word-break:break-all\">";
                Html += "         </div>";
                Html += "   </div>";
                Html += "</div>";
                ss = $(Html);
            }
            ss.appendTo(this);
            获取拖入位置
            var px = ui.position.left;
            var py = ui.position.top;
            //获取布局画布pageArea的在整个页面的绝对偏移量
            var pageArea_px = $("#pageArea")[0].offsetLeft;
            //此处加上73是因为外层的table的top位置为73
            var pageArea_py = $("#pageArea")[0].offsetTop + 73;
            //获取滚动条滚动距离
            var scrollpx = $("#bodyOfPage").scrollLeft();
            var scrollpy = $("#bodyOfPage").scrollTop();
            //设置拖拽到指定地点还可以进行拖动
            ss.draggable({
                containment: "#pageAreaWrapper",//约定在指定区域内拖动
                scroll: false,//如果设置为 true，当拖拽时容器会自动滚动
                stop: function (event, ui) { }
            });
            //双击div，编辑div内部内容。此处还有问题等待解决
            ss.dblclick(function () {
                $("#dialog-form").removeClass("hide");
                var dialog;
                dialog = $("#dialog-form").dialog({
                    title: '属性设置',
                    autoOpen: false,
                    height: 400,
                    width: 450,
                    modal: true,
                    buttons: {
                        OK: function () {
                            var valid = true;
                            if (valid) {
                                if (Type == "input") {
                                    //获取宽高
                                    var content = dialog.find("#divContent").find("input").val();
                                    var divWidth = dialog.find("#divWidth").find("input").val();
                                    var divHeight = dialog.find("#divHeight").find("input").val();
                                    //设置宽高
                                    ss.css('width', divWidth);
                                    ss.find(".wrapperContent").css('width', divWidth);
                                    ss.css('height', divHeight);
                                    ss.find(".wrapperContent").css('height', divHeight);
                                    ss.find(".wrapperContent").find("input").val(content);
                                    dialog.dialog("close");
                                }
                                else if (Type == "lable") {
                                    //获取宽高
                                    var content = dialog.find("#divContent").find("input").val();
                                    var divWidth = dialog.find("#divWidth").find("input").val();
                                    var divHeight = dialog.find("#divHeight").find("input").val();
                                    //设置宽高
                                    ss.css('width', divWidth);
                                    ss.find(".wrapperContent").css('width', divWidth);
                                    ss.css('height', divHeight);
                                    ss.find(".wrapperContent").css('height', divHeight);
                                    ss.find(".wrapperContent").html(content);
                                    dialog.dialog("close");
                                }
                                else if (Type == "Hline") {
                                    //获取宽高
                                    var divWidth = dialog.find("#divWidth").find("input").val();
                                    //设置宽高
                                    ss.css('width', divWidth);
                                    ss.find(".wrapperContent").css('width', divWidth);
                                    dialog.dialog("close");
                                }
                                else if (Type == "Vline") {
                                    var divHeight = dialog.find("#divHeight").find("input").val();
                                    //设置宽高
                                    ss.css('height', divHeight);
                                    ss.find(".wrapperContent").css('height', divHeight);
                                    dialog.dialog("close");
                                }
                            }
                            return valid;
                        },
                        Cancel: function () {
                            dialog.dialog("close");
                        }
                    },
                    close: function () {
                        dialog.dialog("close");
                    },
                    open: function (event, ui) {

                    }
                });
                if (Type == "input") {
                    //设置textarea的值需要用val()函数，html()函数设置不成功
                    dialog.find("#divContent input").val(ss.find(".wrapperContent").find("input").val());
                    dialog.find("#divWidth input").val(ss.css("width"));
                    dialog.find("#divHeight input").val(ss.css("height"));
                    dialog.dialog("open");
                }
                else if (Type == "lable") {
                    //设置textarea的值需要用val()函数，html()函数设置不成功
                    dialog.find("#divContent input").val(ss.find(".wrapperContent").text());
                    dialog.find("#divWidth input").val(ss.css("width"));
                    dialog.find("#divHeight input").val(ss.css("height"));
                    dialog.dialog("open");
                }
                else if (Type == "Hline") {
                    //设置textarea的值需要用val()函数，html()函数设置不成功
                    dialog.find("#divWidth input").val(ss.css("width"));
                    dialog.find("#divContent input").val("");
                    dialog.find("#divHeight input").val("");
                    dialog.dialog("open");
                }
                else if (Type == "Vline") {
                    //设置textarea的值需要用val()函数，html()函数设置不成功
                    dialog.find("#divHeight input").val(ss.css("height"));
                    dialog.find("#divContent input").val("");
                    dialog.find("#divWidth input").val("");
                    dialog.dialog("open");
                }
            }
            );
            //定义点击选中事件
            $(".shield").click(function (event, ui) {
                $(".selected").removeClass("selected");
                $(".shield").removeClass("tuo_blue");
                $(".shield").addClass("tuo_grey");
                $(this).parent().find(".wrapperBorder").addClass("selected");
                $(this).removeClass("tuo_grey");
                $(this).addClass("tuo_blue");

                //定义键盘移动div位置事件(先解除绑定，在重新绑定按键触发事件“$(document).unbind("keydown").keydown”)
                $(document).unbind("keydown").keydown(function (event) {
                    var x = $(".selected").parent().position().top;//水平方向位移
                    var y = $(".selected").parent().position().left;//垂直方向位移
                    if (event.ctrlKey && event.which == 37) {

                        if (y > 0) {
                            y = y - 1;
                            $(".selected").parent().css("left", y + "px");
                        } else {
                            y = 0;
                        }
                    }
                    else if (event.ctrlKey && event.which == 39) {
                        if (y < ($("#pageAreaWrapper").width() - $(".selected").parent().width())) {
                            y = y + 1;
                            $(".selected").parent().css("left", y + "px");
                        } else {
                            y = $("#pageAreaWrapper").width();
                        }
                    }
                    else if (event.ctrlKey && event.which == 38) {

                        if (x > 0) {
                            x = x - 1;
                            $(".selected").parent().css("top", x + "px");
                        } else {
                            x = 0;
                        }
                    }
                    else if (event.ctrlKey && event.which == 40) {
                        x = x + 1;
                        $(".selected").parent().css("top", x + "px");
                    }
                    else if (event.ctrlKey && event.which == 46) {
                        $(".selected").parent().remove();
                    }//让数字按键能够输入
                    else if (event.which >= 96 || event.which <= 105) {
                        return;
                    }
                    return false;
                });
                return false;
            });
            //(有当前class能够调整大小)调整动态生成的元素大小，同时将内层div大小调整
            $(".componentWrapper").resizable({
                autoHide: true,
                resize: function (event, ui) {
                    $(this).find(".wrapperContent").css("width", $(this).width());
                    $(this).find(".wrapperContent").css("height", $(this).height());
                }
            });
            //横线调整长短
            $(".componentWrapperHline").resizable({
                autoHide: true,
                handles: 'e',
                resize: function (event, ui) {
                    $(this).find(".wrapperContent").css("width", $(this).width());
                    $(this).find(".wrapperContent").css("height", 1);
                }
            });
            //竖线调整长短
            $(".componentWrapperVline").resizable({
                autoHide: true,
                handles: 's',
                resize: function (event, ui) {
                    $(this).find(".wrapperContent").css("height", $(this).height());
                }
            });
        }
    });

项目Demo​​​​​​​下载