位置: 编程技术 - 正文

jQuery拖动布局其结果保存到数据库(jquery 拖拽布局)

编辑:rootadmin

推荐整理分享jQuery拖动布局其结果保存到数据库(jquery 拖拽布局),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery拖拽布局插件,jquery移动元素,jq拖拽功能,js拖拽布局,js div拖动,jquery 拖拽布局,jquery 拖拽布局,jq拖拽功能,内容如对您有帮助,希望把文章链接给更多的朋友!

最近的项目中涉及到了用户个性化定制首页的需求,用户要求可以随意拖动首页模块的位置,来实现个性化的布局。本文讲解如何使用和PHP实现拖动布局并将拖动后的布局位置保存到数据库。

很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后,再次访问页面时,发现布局又还原成最初的状态。这种cookie记录的方式使用简单,但不适合像个人中心、管理系统主页的要求。本例实现的效果:通过拖动随意布局页面模块。记录拖动后模块的位置,并记录到数据库中。页面永久性布局,用任意浏览器在任意时候打开,页面布局不变。(除非用户再次更改模块的排序,跟cookie没有关系)。原理采用的拖动排序插件实现拖动效果。将拖动后的模块的位置通过ajax传给服务端PHP程序。PHP程序处理位置信息后,更新数据库中相应的字段内容。XHTML

DIV#loader用于显示提示信息,如loading...,#orderlist是一个隐藏域,用于记录模块的排序值。“...”表示循环了n个DIV.modules,具体生成的代码在后面会讲到。CSS

jQuery拖动布局其结果保存到数据库(jquery 拖拽布局)

简单,关键是要给.modules一个想左浮动的样式float:left。jQuery

拖动排序的动作都写在$list.sortable({...})里面,参数设置和方法请看代码的注释。juery ui的sortable插件提供了很多方法和参数配置,详情请查看拖动完成要执行一个update方法,该方法需要将拖动后排序的位置通过ajax提交给后台处理。

说明:循环每个模块.modules,获取拖动排序后每个模块的属性title值,将值通过逗号连接成一个字符串。原来的未拖动之前的排序值从隐藏域orderlist中获取。获取排序值后,就是通过ajax和后台程序交互了。PHPupdate.php接收前端ajax通过POST提交过来的两个参数,及排序前的值和排序后的值,将这连个值进行对比,如果不相等,则更新数据库中的排序字段,完成了拖动排序后的及时保存。

首页index.php再回到展示布局的首页index.php。index.php通过连接数据库读取模块的排序信息,并将各模块显示出来。首先别忘了加载jquery库和jquery ui的sortable拖动排序插件。

读取数据库的排序字段值。

循环显示各模块。

诚然,真正的拖动排序结果的保存都跟每个用户信息相关联,所以数据库的结构设计方面大家可以自行解决,尽情发挥吧。

标签: jquery 拖拽布局

本文链接地址:https://www.jiuchutong.com/biancheng/370390.html 转载请保留说明!

上一篇:jQuery表格行上移下移和置顶的实现方法(js表格上移下移)

下一篇:jQuery控制DIV层实现由大到小,由远及近动画变化效果(jquery如何给div属性赋值)

  • 从价税是什么意思
  • 加计抵减不符合怎么办
  • 哪些增值税专用发票可以抵扣进项税
  • 建筑公司可以开机械租赁发票吗
  • 百旺税控盘自己用不了
  • 一般纳税人简易计税可以抵扣进项税额吗
  • 自然人系统怎么申报个人所得税
  • 记账凭证背面怎么填写
  • 事业单位补发
  • 国际货运代理免税报表填写
  • 税控盘服务费去年忘记抵了今年可以抵扣吗
  • 个体户没有税务登记证能注销营业执照吗
  • 有哪些发票可以开成餐饮服务
  • 固定资产本期折旧额与上期不一样
  • 销售礼盒增值税税率
  • 企业去年
  • 增值税不征税收入的三个条件
  • 出口退税收入凭证怎么填
  • 资管新规出台目的
  • 劳务派遣公司怎么赚钱
  • 成本费用怎么做分录
  • 帮其他公司垫付的钱怎么写分录
  • 坏账准备的转回对资产的影响
  • 财务中暂估入账会计分录
  • 网速突然减慢
  • linux如何开启端口
  • 会计上金融资产包括哪些
  • 在win7系统中,添加打印机驱动程序
  • koeids.dll
  • php sybase_fetch_array使用方法
  • php 字符串函数
  • 厂家赠送的商品如何走账
  • 蕨菜的功效与作用及营养价值
  • 增值税红字专用发票什么意思
  • 如何开增值税专用发票步骤图解
  • 销售汇总怎么做分录
  • php制作验证码
  • 阿里云主机php版本
  • 无形资产入股后如何处理
  • c++怎么创建文件夹
  • 预缴税款表怎么打印出来
  • 坏账准备的会计分录怎么写
  • 法院判决后的利息
  • ps像素分辨率什么意思
  • 预收物业费纳税义务发生时间
  • 税务新法规
  • 收伙食费入什么科目
  • 新会计制度固定资产对应科目
  • 法人向公司账户打款
  • 普通费用发票不入账会有什么后果吗
  • 预缴企业所得税计算公式
  • 现金流量表季度期初现金余额怎么填
  • 应收账款未计提坏账能直接核销
  • 跨年错账更正
  • 股息和资本收益
  • 应交销项税转出分录
  • 农业企业纳税申报
  • 建筑公司的会计好做吗
  • 新增注册资金
  • 启动mysql1067错误
  • 让Vista响应更快
  • win7关机很慢是什么原因
  • 笔记本电脑的触摸板怎么开启和关闭
  • centos怎么连接远程服务器
  • .exe是什么意思
  • mac中通过python关闭浏览器中的finder弹框
  • git怎么备份
  • win10预览版绿屏重启解决
  • echarts怎么用
  • linux怎么使用shell
  • Android开发中遇到的问题及解决方案
  • 菜鸟教程 安卓版
  • 如何用python连接数据库
  • diy相册设计
  • [置顶]星陨计划
  • jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
  • 税务风险科是干什么的
  • 企业税务登记是什么证件
  • 增值税普通发票可以抵扣吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设