位置: 编程技术 - 正文

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属性赋值)

  • 审计合同需要交税吗
  • 减免增值税如何结转
  • 劳务费个人所得税税率表2023最新
  • 实际已缴纳所得税额在汇算清缴报告里怎么看
  • 委托外单位研发的研发费用加计扣除最新政策
  • 融资租赁担保余值
  • 购入原材料结转采购成本的会计分录
  • 哪些发票能做公章
  • 服务,不动产和无形资产扣除项目本期实际扣除金额
  • 企业年金也需要缴纳吗
  • 收到银行的贷款
  • 可供分配利润包含哪些
  • 收到保险赔款是什么意思
  • 以前多计提了应付职工薪酬怎么平账?
  • 银行理财产品赎回
  • 年底结账会计处理
  • 税金及附加与期间费用区别
  • 免征企业所得税的有哪些行业
  • 营改增后房地产开发税费一览表
  • 赠送的产品需要开发票吗
  • 无形资产的定义和特征
  • 货到付款一般付多少运费
  • 重装系统出现无效签名
  • linux系统怎么关闭端口
  • 公司收到项目的现金
  • 酒店没有营业执照开业员工有责任吗
  • PHP:Memcached::incrementByKey()的用法_Memcached类
  • h5移动端上传pdf
  • 归还银行借款摘要模板
  • 向银行借入的资金属于什么
  • php反序列化漏洞原理
  • 对公结售汇的合规风险
  • php生成二维码海报
  • 报销钱大写数字
  • 残保金解决方案
  • 捐赠支出如何做凭证
  • web前端面试基础知识
  • ue4ui界面制作
  • userpasswords
  • 纳税检查调整销售额什么意思
  • 红字发票信息表填好后再怎么操作
  • 土方工程合同签了一般多久开工
  • 公司购买的商品房怎么入账
  • pycharm cant find main
  • 差额征税可以开专票抵扣吗
  • 法人一直把公户账户转账
  • 动迁补偿金
  • 广告费和业务宣传费
  • 企业发生的各项罚款收入应计入
  • 纳税人的收入总额是什么
  • 营业外支出如何做账
  • 暂估入库一直没有发票
  • 凭发票报销的通知简单
  • 生产的半成品怎么做分录
  • 收到现金货款存入银行会计分录
  • 怎样算小公司
  • windows下mysql 5.7版本中修改编码为utf-8的方法步骤
  • 如何把数据生成表格
  • linux系统中的用户大体可分为三组
  • 苹果mac双系统好不好
  • acer笔记本电脑触摸板没反应
  • win10 1607更新失败
  • linux top命令详解内存过高查询
  • win10手机版微信uwp下载
  • os x10.11el capitan beta3下载地址
  • centos时间不同步的解决方法(centos时间同步)
  • win10系统如何设置不休眠
  • 微信小程序基于spingboot
  • unity3d操作
  • python爬虫视频教程
  • 木瓜电子
  • python怎么用
  • androidx混淆
  • Sublime Text 3常用插件及安装方法
  • python3 编码转换
  • android中fragment
  • 湖北耕地占用税标准
  • 什么是跨地区经营汇总纳税企业
  • 志愿者补贴如何领取
  • 城镇土地使用税会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设