jquery 拖动(Draggable) 约束运动,输出数组排序Array
<!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>
</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>
jquery 拖动(Draggable) 约束运动,输出数组排序Array的更多相关文章
- JQuery UI - draggable参数中文详细说明
概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
- JQuery UI Draggable插件使用说明文档
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...
- jQuery拖动剪裁图片作为头像
图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...
- jQuery模拟打字逐字输出代码
效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...
- JQuery 拖动层
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- jQuery UI - draggable 中文API
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- JQuery UI - draggable(转)
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
随机推荐
- 利用ffmpeg0.6.1把.h264纯码流打包成.mp4 .avi等格式 (转载)
转自:http://cache2.weidaohang.org/h/index.php?q=aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1cWluZ183MzkvYXJ0aWNsZS ...
- STS和Eclipse安装Lombok插件
参考:https://www.cnblogs.com/caozx/p/9510354.html 参考:https://blog.csdn.net/wutian90/article/details/87 ...
- hdoj5115【区间DP·基础】
题意: 有n头wolf排成一排,杀一头wolf回受到受到的伤害=它的本身a[i]+相邻两个b[i-1]+b[i+1].然后杀死第k个位置的wolf的话,k-1和k+1默认相邻(满足的话). 思路: 用 ...
- BestCoder Round #74 (div.1) 1002Shortest Path(hdoj5636)
哈哈哈哈,我就知道这道题目再扔给我,我还是不会,就是这么菜,哈哈哈 一开始官方题解就没搞懂-然后就看了一下别人的代码,水水过就算了.今天拿到-GG: 题意: 一开始,有一张原图,有一条长度为n的链. ...
- bzoj 2946: [Poi2000]公共串【SAM】
对第一个串建SAM,把剩下的串在上面跑,每次跑一个串的时候在SAM的端点上记录匹配到这的最大长度,然后对这些串跑的结果取min,然后从这些节点的min中取max就是答案 注意在一个点更新后它的祖先也会 ...
- pip查看安装包的可安装版本
不需要下载或者安装任何其他软件包,你可以指定一个高得离谱的版本号( 不可能有实际安装候选),并且可用的版本将被打印: pip install scrapy==122222 得到信息后指定版本就好了 p ...
- 温习LOGO语言
LOGO是什么? LOGO语言是一种早期的编程语言,也是一种与自然语言非常接近的编程语言,它通过"绘图"的方式来学习编程,对初学者特别是儿童进行寓教于乐的教学方式. LOGO语言创 ...
- 修改static控件背景颜色和文字颜色
当 static 控件或具有 ES_READONLY 风格的 edit 控件被绘制时,会向父窗口发送 WM_CTLCOLORSTATIC 消息.如果我们在窗口过程中处理该消息,就必须返回一个画刷句柄, ...
- Contextual Action bar(1) CAB in Android
Contextual Action bar (CAB) in Android BY PARESH MAYANI - OCTOBER, 23RD 2013 Before getting into the ...
- MyEclipse常用快捷键及快捷键大全
MyEclipse常用快捷键:alt+/ 代码提示ctrl+shift+F 代码排版ctrl + / 注释当前行 ctrl+D 删除当前行 Alt+C 拷贝当 ...