极乐门资源网 Design By www.ioogu.com

jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态。

工作中遇到了这个情况,遍把这个问题记了下来,具体思路是:

利用拖拽stop后利用

 var arr = $( ".sortable" ).sortable('toArray');

记录拖拽后的id数组顺序,然后把这个数组存起来,可以存cookie,数据库,localstorage等,刷新页面后读取这个数组,然后进行重新排序。

具体的代码如下可直接复制运行。本文将数组保存在localstorage里面。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI 拖动(Draggable) - 约束运动</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="/UploadFiles/2021-04-02/jquery.min.js">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
jquery,ui,sortable,拖拽

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“jquery ui sortable拖拽后保存位置”

暂无jquery ui sortable拖拽后保存位置的评论...