ZUI 拖拽排序

ZUI例子模板，Fork来编写你的代码。

by catouse

HTML

<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/css/zui.min.css">
<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/lib/datatable/zui.datatable.min.css">
<script src="https://easysoft.github.io/zui/dist/js/zui.min.js"></script>
<script src="https://easysoft.github.io/zui/dist/lib/datatable/zui.datatable.js        "></script>
<script src="https://easysoft.github.io/zui/dist/lib/calendar/zui.calendar.min.js"></script>
<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/lib/calendar/zui.calendar.min.css">
<div class="container">
  <ul class="nav nav-stacked nav-pills" id='nav'>
    <!-- 为每个li添加data-id属性用于跟踪记录顺序  --> 
    <li data-id="1"><a href="###"><i class="icon icon-move"></i> Lorem ipsum dolor.</a></li>
    <li data-id="2"><a href="###"><i class="icon icon-move"></i> Nostrum quaerat, enim?</a></li>
    <li data-id="3"><a href="###"><i class="icon icon-move"></i> Obcaecati, error quidem.</a></li>
    <li data-id="4"><a href="###"><i class="icon icon-move"></i> Doloribus, obcaecati, quae.</a></li>
    <li data-id="5"><a href="###"><i class="icon icon-move"></i> Labore, dolorum, tempore.</a></li>
    <li data-id="6"><a href="###"><i class="icon icon-move"></i> Ullam, quidem laudantium.</a></li>
    <li data-id="7"><a href="###"><i class="icon icon-move"></i> Illo, iusto, necessitatibus?</a></li>
    <li data-id="8"><a href="###"><i class="icon icon-move"></i> Aliquam, eos, dolorem.</a></li>
    <li data-id="9"><a href="###"><i class="icon icon-move"></i> Reprehenderit, porro, ullam.</a></li>
    <li data-id="10"><a href="###"><i class="icon icon-move"></i> Est, id, sed.</a></li>
  </ul>
</div>

CSS

#nav > li.drag-item {opacity: 0.4}

JavaScript

$(function() {
    // 来点js怎么样，下面是一个显示漂浮消息的例子
    $.zui.messager.success('ZUI 1.4 已载入', {placement: 'center'});
    
    $('#nav').sortable({
    	selector: 'li', // #nav中需要排序的子节点选择器
      dragCssClass: 'drag-item',
      finish: function(e) {
      	// 获取排序数据
        var orders = [];
        $.each(e.list, function(){
        	orders.push($(this).data('id'));
        });
        console.log('id按顺序保存的数组：', orders);
      }
    });
});