jqueryui sortable拖拽后保存位置
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态。
工作中遇到了这个情况,遍把这个问题记了下来,具体思路是:
利用拖拽stop后利用
<!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">
<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"> -->
<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>
5
</div>
</div>
</li>
<li id="draggable4" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
4
</div>
</div>
</li>
<li id="draggable5" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
3
</div>
</div>
</li>
<li id="draggable6" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
2
</div>
</div>
<li id="draggable1" class="drag">
<div class="innerdiv">
<div class="innerdiv2">
<div class="move">放在这里</div>
1
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>
jqueryui sortable拖拽后保存位置的更多相关文章
- C# 图片缩放,拖拽后保存成图片的功能
窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...
- twaver拓扑图拖拽后保存json数据
功能描述:拓扑图.对节点进行拖拽,序列化获取拓扑图信息,保存到本地localStorage,刷新页面,执行反序列化,从本地获取之前保存的数据,展现之前拖拽后的拓扑 拓展:此处存储用的是web本地存储l ...
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽
新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...
- OpenLayer3调用天地图,拖拽后,地图消失的问题[已解决]
拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...
- iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影
iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...
- Sortable拖拽排序插件数据筛选
后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...
- angular ng-repeat+sortable 拖拽demo
由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...
- VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...
随机推荐
- Matlab 2014b For Mac安装破解
1.Matlab 2014b 的安装和破解文件下载: 安装文件:http://www.cncrk.com/downinfo/80718.html 破解文件:http://pan.baidu.com/s ...
- Python爬虫(二十三)_selenium案例:动态模拟页面点击
本篇主要介绍使用selenium模拟点击下一页,更多内容请参考:Python学习指南 #-*- coding:utf-8 -*- import unittest from selenium impor ...
- AJAX扩展-POST传递参数并跳转页面
拓展的代码: 这段代码的原理是创建一个表单,所有args都创建一个隐藏的input,用post方法把这些参数传递过去 注意form表单一定要加载到页面中,即下面代码中标红的部分,不然参数是无法被传递的 ...
- [UWP]了解TypeConverter
1. 前言 TypeConverter是XAML解释器的幕后功臣,它做了大量工作,从WPF诞生以来,几乎每一次XAML的运作都有它的参与.虽然UWP中TypeConverter已经彻彻底底退居幕后,连 ...
- github上搜索资源
1.进入官网 点击Explore 2.点击Trending 3.资源都在这上面,可以根据语言分类 4.搜索链接 https://github.com/trending
- Chef 自动化运维:Chef 的安装
安装准备 准备三台服务器,分别用作 Chef Server.Chef DK.Chef Client 的安装使用. 在三台服务器中,添加以下 hosts: vim /etc/hosts 192.168. ...
- for in,Object.keys()与for of的区别
for in 1.for in一般用于遍历对象的属性: 2.作用于数组的for in除了会遍历数组元素外,还会遍历自定义可枚举的属性,以及原型链上可枚举的属性:3.作用于数组的for in的遍历结果是 ...
- 浅谈Async/Await
概要 在很长一段时间里面,FE们不得不依靠回调来处理异步代码.使用回调的结果是,代码变得很纠结,不便于理解与维护,值得庆幸的是Promise带来了.then(),让代码变得井然有序,便于管理.于是我们 ...
- Mac中Eclipse安装和使用svn
Eclipse版本为Neon Release (4.6.0) 安装svn 安装HomeBrew 在终端中输入 ruby -e "$(curl -fsSL https://raw.github ...
- 安装cocoa pods时出现Operation not permitted - /usr/bin/xcodeproj的问题
安装cocoa pods时, 在命令行中输入: 安装:sudo gem install cocoapods报Operation not permitted - /usr/bin/xcodeproj这个 ...