jquery ui sortable拖拽后保存位置
更新时间：2017年04月27日 14:22:52 作者：断劫断念
这篇文章主要为大家详细介绍了jquery ui sortable拖拽后保存位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" > -->
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.container{
border: 1px solid black;
margin-bottom: 10px;
margin-top: 10px;
}
.container:after{
content: "";
display: block;
clear: both;
}
.drag{
width: 200px;
height: 200px;
float: left;
}
ul li {
list-style: none;
}
.innerdiv{
padding: 10px;
height: 100%;
}
.innerdiv2{
background: grey;
height: 100%;
}
#draggable1{
width: 400px;
height: 400px;
}
.move{
width: 80px;
height: 40px;
background: blanchedalmond;
}
</style>
<script>
$(function() {
var arr = '';
var sort = $( ".sortable" ).sortable({
handle: ".move",
opacity: 0.7,
delay: 150,
cursor:'move',
revert: true,
stop:function(){
//记录sort后的id顺序数组
var arr = $( ".sortable" ).sortable('toArray');
console.log(arr);
//拖拽后利用localStorage记录顺序
localStorage.arr = arr;
}
});
var localSt = localStorage.arr;
//如果有localst记录则，按照这个进行排序元素
if(localSt){
var resArr = localSt.split(',');
var resUl = $('ul');
//li 数组
for(var i = 0;i < resArr.length;i++){
resUl.append($("#" + resArr[i]));
}
}
});
</script>
</head>
<body>
<div class="container">
<ul class="sortable">
<li id="draggable2" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
只有鼠标放在小长方形里才能移动
</div>
</div>
</li>
<li id="draggable3" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
</div>
</div>
</li>
<li id="draggable4" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
</div>
</div>
</li>
<li id="draggable5" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
</div>
</div>
</li>
<li id="draggable6" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
</div>
</div>
<li id="draggable1" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
extend()是jQuery中一个重要的函数，作用是实现对对象的扩展, 它经常用于jQuery插件的开发，jQuery内部也使用它来扩展属性方法，如noConflict方法，就是用extend方法来扩展的。下面来一起深入的再学习下jquery中extend的实现吧。2016-12-12
这篇文章主要介绍了jQuery实现仿QQ在线客服效果的滚动层代码,可实现实时读取屏幕高度并显示的功能,涉及jQuery响应滚动事件及定时操作的相关技巧,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了jquery实现表格行的上下移动和置顶，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了jquery增加和删除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以参考下2015-01-01
Jquery ajax传递复杂参数给WebService的实现代码
Jquery ajax传递复杂参数给WebService的实现代码，需要的朋友可以参考下。主要是属性比较多。2011-08-08
这篇文章主要介绍了jQuery实现字体颜色渐变效果的方法,结合实例形式分析了jQuery动态设置元素属性实现字体颜色渐变效果的相关操作技巧,需要的朋友可以参考下2017-03-03
下面小编就为大家带来一篇关于两个jQuery(js)特效冲突的bug的解决办法。小编觉得挺不错的，现在就分享 给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本篇文章是对可扩展的无限极联动下拉选项的实例进行了分析介绍，需要的朋友参考下2013-05-05
Pinterest使用一种新的方式布局取得成功之后，们把他叫做瀑布流，国内现有美丽说，蘑菇街，花瓣等代表的网站接下来为你介绍一个juqery的插件masonry的使用，感兴趣的你可以参考下哈2013-03-03
本文主要给大家详细介绍了jQuery过滤选择器，包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等，十分全面,需要的朋友可以参考下2015-01-01
最新评论