标签：
空间属性置顶：
| 属性 | 说明 |
| 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">123</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="1">
<div class="dd-handle">
Item 1
<i class="pull-right bigger-130 icon-warning-sign orange2"></i>
</div>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
<ol class="dd-list">
<li class="dd-item" data-id="3">
<div class="dd-handle">
Item 3
<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="4">
<div class="dd-handle">
<span class="orange">Item 4</span>
<span class="lighter grey">
with some description
</span>
</div>
</li>
<li class="dd-item" data-id="5">
<div class=