jQuery之Nestable
空间属性置顶：
| 属性 | 说明 |
| change | 事件，当控件改变时触发 |
| nestable | 方法，获取顺序JSON数据，形式如下：
|
今天，有个刚毕业的同事要做一个“排序出港”的功能，看了他用的控件，炫酷程度惊呆了我，而且实现方式非常简单。还是应验了那句老话，你知道多少并不重要，重要的是如何利用你所知道的。
先来看效果：
这么炫酷的一个出港顺序管理，出港顺序直接通过拖拉船名控制。做了Web开发两年，已经习惯了当用户点击的时候做什么操作。实际上，大部分操作都是和数据库打交道。即使玩游戏也是如此，实际上通过拖动来控制顺序是非常炫酷的。
下面用Nestable来尝试实现下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Nestable lists</title>
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.full.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="jquery.nestable.min.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/ace.min.css" />
<script src="assets/js/jquery.nestable.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.dd').nestable();
$('.dd-handle a').on('mousedown', function(e){
e.stopPropagation();
});
$('[data-rel="tooltip"]').tooltip();
$('#nestable').nestable().on('change', function(){
var r = $('.dd').nestable('serialize');
$("#xx").html(JSON.stringify(r)); //改变排序之后的数据
});
$('#nestable').nestable().on('change', updateOutput);
});
</script>
</head>
<body>
<div id="xx"></div>
<div class="main-container" id="main-container">
<script type="text/javascript">
try{ace.settings.check('main-container' , 'fixed')}catch(e){}
</script>
<div class="main-container-inner">
<a class="menu-toggler" id="menu-toggler" href="#">
<span class="menu-text"></span>
</a>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-6">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" data-id="">
<div class="dd-handle">
Item
<i class="pull-right bigger-130 icon-warning-sign orange2"></i>
</div>
</li>
<li class="dd-item" data-id="">
<div class="dd-handle">Item </div> <ol class="dd-list">
<li class="dd-item" data-id="">
<div class="dd-handle">
Item
<a data-rel="tooltip" data-placement="left" title="Change Event Date" href="#" class="badge badge-primary radius-5 tooltip-info pull-right white no-hover-underline">
<i class="bigger-120 icon-calendar"></i>
</a>
</div>
</li>
<li class="dd-item" data-id="">
<div class="dd-handle">
<span class="orange">Item </span>
<span class="lighter grey">
with some description
</span>
</div>
</li>
<li class="dd-item" data-id="">
<div class="dd-handle">
Item
<div class="pull-right action-buttons">
<a class="blue" href="#">
<i class="icon-pencil bigger-130"></i>
</a> <a class="red" href="#">
<i class="icon-trash bigger-130"></i>
</a>
</div>
</div>
<ol class="dd-list">
<li class="dd-item item-orange" data-id="">
<div class="dd-handle"> Item </div>
</li>
<li class="dd-item item-red" data-id="">
<div class="dd-handle">Item </div>
</li>
<li class="dd-item item-blue2" data-id="">
<div class="dd-handle">Item </div>
</li>
</ol>
</li>
<li class="dd-item" data-id="">
<div class="dd-handle btn-yellow no-hover">Item </div>
</li> <li class="dd-item" data-id="">
<div class="dd-handle">Item </div>
</li>
</ol>
</li>
<li class="dd-item" data-id="">
<div class="dd-handle">
Item
<span class="sticker">
<span class="label label-success arrowed-in">
<i class="icon-ok bigger-110"></i>
</span>
</span>
</div>
</li>
<li class="dd-item" data-id="">
<div class="dd-handle">Item </div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ace-settings-container" id="ace-settings-container">
<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
<i class="icon-cog bigger-150"></i>
</div>
<div class="ace-settings-box" id="ace-settings-box">
<div>
<div class="pull-left">
<select id="skin-colorpicker" class="hide">
<option data-skin="default" value="#438EB9">#438EB9</option>
<option data-skin="skin-1" value="#222A2D">#222A2D</option>
<option data-skin="skin-2" value="#C6487E">#C6487E</option>
<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
</select>
</div>
<span> Choose Skin</span>
</div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
</div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
</div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
</div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
</div>
<div>
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
<label class="lbl" for="ace-settings-add-container">
Inside
<b>.container</b>
</label>
</div>
</div>
</div>
</div> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="icon-double-angle-up icon-only bigger-110"></i>
</a>
</div>
</body>
</html>
以上代码实现的东西是，当用户拖拉切换顺序的时候，将顺序的JSON输出到顶部。
显示效果如下：
当然，在切换的时候，如果不是显示在顶部，而是发个AJAX去给数据库Update个顺序，那这种操作，就是刚买电脑的小学生都会灵活运用了。
jQuery之Nestable的更多相关文章
- 8 个最好的 jQuery 树形 Tree 插件
由于其拥有庞大,实用的插件库,使得 jQuery 变得越来越流行.今天将介绍一些最好的 jQuery 树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的 jQuery 插件,它将一个无序 ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- jquery Nestable 获取改变排序后的json数据 拖动排序
<script type="text/javascript"> jQuery(function($){ $('.dd').nestable(); $('.dd-hand ...
- jquery.nestable.min.js可拖动标签
主容器为一个叫div的classname为dd的东西. 只要对这个主容器进行捕获加上一个方法 nestable就可以了. 可以给的属性为 serialize 直接以字符串的形式给入,意思就是按 ...
- 10个jQuery插件分享
原文:http://www.shejidaren.com/10-jquery-plugins.html blur.js blur.js是一个很有意思的插件,它能实现像WIN7 AERO效果的JS插件, ...
- 30 个最棒的 jQuery 的拖放插件
jQuery 允许用户为任意 DOM 元素添加可拖放的功能,通过 jQuery 的拖放插件你可以轻松实现网页上任意元素的拖拽操作.在本文中我们向你推荐 30 个最棒的 jQuery 的拖放插件. 点击 ...
- 助你简化开发的 jQuery 插件
Vanity Toolset vanity toolset是一套方便的UI工具集,可以帮助你快速的搭建幻灯,聚光灯,占位,收放相关的UI,它完成了大部分的UI功能,你只需要花费很少时间就可以构建一个完 ...
- jQuery Nestable2 使用总结
最近,因为公司的一个新项目,用了一个基于bootstrap二次改造的国外友人的框架.感觉很一般吧,要求更换框架,客户拒绝.只能搞这个,发现里面一个jQuery插件-[Nestable]但是源作者长时间 ...
- Bootstrap学习笔记之Nestable可拖拽树结构
Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看. 下图是我在现在系统中用到的Nestable,对系统模 ...
随机推荐
- Form_通过Zoom客制化跳转页面功能（案例）
2012-09-08 Created By BaoXinjian
- 《挑战程序设计竞赛》 4.1.1 矩阵 P286
想写几篇挑战的感悟,也有助于自己理解这本书.但这上面大多贴的是书上的代码,主要是为了用的时候后直接复制就好了,这样就很方便了,就相当于黑盒模板了. 1.线性方程组 /** \brief 高斯消元法 * ...
- SteamVR Unity工具包（VRTK）之激光和移动
简单激光指针(VRTK_ SimplePointer) 简单指针(Simple Pointer)脚本从控制器尾部发出一个有色光束来模拟激光束.这在场景中指向对象很有用,它能判断所指向的对象以及对象距控 ...
- mapreduce任务中Shuffle和排序的过程
mapreduce任务中Shuffle和排序的过程 流程分析: Map端: 1．每个输入分片会让一个map任务来处理,默认情况下,以HDFS的一个块的大小(默认为64M)为一个分片,当然我们也可以设置 ...
- Python语言快速入门
Python的主提示符(>>>):是解释器告诉你它正在等待你输入的下一个语句 Python的次提示符(...):告诉你解释器正在等待你输入当前语句的其他部分 [简介] Python( ...
- 如何让python程序运行得更快
原则1:不优化 原则2:不要优化那些不重要的部分(否则会降低可读性) 解决方案: 1. 使用函数,局部变量比全局变量快很多.尽量使用函数,如main() 2. 有选择性的消除属性访问. 如多用 fro ...
- mac打开.caj格式文件
以为用mac后使用会变得更方便些,写毕设时终于派上用场,可惜啊,mac竟然打不开.caj文件,这意味着什么?相信所有在做毕设的小伙伴们都能懂其中的凄凉.特别是硕士或博士的论文,你得从知网上下上百篇的文 ...
- SQL Server 2005中的分区表（五）：添加一个分区(转)
所谓天下大事,分久必合,合久必分,对于分区表而言也一样.前面我们介绍过如何删除(合并)分区表中的一个分区,下面我们介绍一下如何为分区表添加一个分区. 为分区表添加一个分区,这种情况是时常会 发生的.比 ...
- java io InputStream 转 byte
InputStream is ; ByteArrayOutputStream baos = new ByteArrayOutputStream(); byte[] b = new byte[1024] ...
- java io操作常规
1.四种类型: 字节流: InputStream OutputStream 字符流: Reader Writer 2.转换流 InputStreamReader, OutPutStreamWriter ...