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

最新推荐文章于 2024-10-09 15:55:54 发布
最新推荐文章于 2024-10-09 15:55:54 发布
阅读量639 收藏 1
点赞数
分类专栏： JQ 拖拽布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CAO11021/article/details/119328796
版权

 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​​​​​​​下载

乾三_
关注
专栏目录
html可拉动页面布局,DIV+CSS+JS实现的可以随意拖动的网页布局
weixin_36312301的博客
06-10 968
DIV+CSS+JS实现的可以随意拖动的网页布局丨芯晴网页特效丨CsrCode.Cnbody {margin:0px;padding:0px;font-size:12px;text-align:center;}body > div {text-align:center; margin-right:auto; margin-left:auto;}.content{width:900px;}.c...
普通发票（增值税专用发票）html+css
weixin_44110923的博客
06-25 4489
因业务需要，将发票样式呈现出来。直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
jquery实现可拖拽布局
热门推荐
来一颗砂糖橘
04-28 2万+
前端实现可拖拽布局Jquery
【JavaScript】事件 - 实现元素拖拽至画布
最新发布
小秀的博客
10-09 1280
React：使用state和onDrop等事件来处理拖拽和元素的放置。Vue：利用data和v-on指令来处理拖拽事件，同时使用v-for结合动态样式来更新放置元素的位置。两者的核心思路都是通过事件监听来处理拖拽操作，并将元素的位置存储在状态中，随后根据状态重新渲染页面。
基于JQuery的拖拽布局
01-03
基于JQuery的拖拽布局。自己将组建编写即可。解压后运行index.html即可查看操作。
html页面拖拽自定义布局,如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面
weixin_39553352的博客
06-05 701
html>简单的拖拽*{padding:0;margin:0;font-size:12px;}.list{width:360px;height:230px;background-color:#eee;margin:24pxauto;}.list.listview{width:98px;height:98px;border:1pxsolid#555;margin:10px0...
网页拖拽布局发票.rar
08-02
在本项目"网页拖拽布局发票"中，我们看到使用了HTML和jQuery UI来实现这种功能。以下是对这个主题的详细阐述： 首先，HTML（HyperText Markup Language）是网页的基础结构语言，用于定义网页内容和结构。在拖拽布局...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
weixin_28884213的博客
06-07 1068
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器，基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于LayoutIt拖放排序在线编辑的Bootstrap可视化布局系统，目标是打造成一个好用的BS端拖拽式报表设计器-拖拽式表单设计器。暂不提供在线浏览,代码还在完善中!本次代码对第一个版本进行了全部代码的重构，增...
HTML5-JQ-拖拽小 案例
07-20
HTML5和jQuery（JQ）结合使用可以创造出丰富的交互效果，比如这个"拖拽小案例"就是其中之一。在这个案例中，我们将重点讨论如何利用HTML5的拖放（drag and drop）API以及jQuery 3.3.1来实现图片的拖拽功能。 HTML5...
JQ实现拖拽上传并显示
01-08
总的来说，"JQ实现拖拽上传并显示"涉及的技术主要包括HTML5的拖放API、FileReader API、FormData对象以及jQuery的事件绑定和Ajax方法。这些技术的结合使得文件上传变得更加直观和流畅，提高了用户在网页上的交互体验...
网页设计模板-漂亮的黑色导航jq幻灯商务服务html5模板.zip
03-18
网页设计模板是构建网站的一种快速方法，它提供了一个预先设计的布局和样式，开发者可以根据自己的需求进行修改和定制。在这个“漂亮的黑色导航jq幻灯商务服务html5模板”中，我们可以挖掘出多个与网页设计、前端...
jquery可拖拽布局
08-07
jquery 可拖拽效果,动态布局,自动固定,自定义方便.jquery 可拖拽效果,动态布局,自动固定,自定义方便.
Jquery可拖拽布局组件
06-13
Jquery Portal布局组件，可以进行拖拽、关闭、展开、收缩等操作，并可以自定义比例，按比例进行布局。是在基于别人基础上做了一些修改，支持主流浏览器，并且支持IE8、IE9、IE10等。
jquery可拖拽布局.jquery 可拖拽效果,动态布局,自动固定,自定义方便.2018最新
08-13
jquery 可拖拽效果,动态布局,自动固定,自定义方便.jquery 可拖拽效果,动态布局,自动固定,自定义方便. 2018最新版本
jquery 强大拖拽布局插件
10-15
觉得值你花这么多积分 布局设置: 1:33:11:1:21:2:12:1:1默认（三栏为左中右结构） 功能模块设置: 可选择该模块是否启用 添加模块保存配置：可自定义添加模块 可拖拽显示的所有模块
发票单（jQuery代码实现）
yjy528的博客
04-04 2746
按照需求，用js代码做了一张发票单，技术含量不高，主要是样式细节，数据动态可替换，分享出来以供需要的童鞋参考，大佬的话。。。请假装没看见哦，欢迎指正，和广大菜鸟共同学习
jquery拖动div布局排序插件[dragsort,nestedSortables]
weixin_34248023的博客
11-16 567
插件一：JqueryListDragSort 官网下载地址：http://dragsort.codeplex.com/ 插件二：nestedsortables 官网下载地址： http://code.google.com/p/nestedsortables/downloads/list 推荐第二个，支...
jQuery图片列表拖拽排序布局
weixin_30555753的博客
12-03 571
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10058035.html
Html与jqueryui打造网页拖拽布局技术解析
以上内容详细介绍了通过HTML和jQuery UI实现网页拖拽布局的知识点和实现方法。该技术在现代Web开发中非常实用，能够极大提升用户界面的灵活性和互动性。开发者应掌握这些技能，以适应不断变化的用户交互需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值