jquery-ui的拖拽排序(sortable)

背景

结合Bootstrap的list-group记录一下jquery-ui中sortable的使用

Sortable

官网Demo：http://jqueryui.com/sortable/

官网API     ：http://api.jqueryui.com/sortable/

<div>
   <ul class="list-group">
     <li class="list-group-item">one</li>
     <li class="list-group-item">two</li>
     <li class="list-group-item">three</li>
   </ul>
</div>
<script>
   $(function(){
     $('.list-group').sortable({
       axis: "y",
       update: function( event, ui ) {
        console.log(ui);
       }
     });
  });
</script>

其中axis限定拖拽的方向，y表示只能上下拽，不能左右拽

update是拖拽结束时的回调函数，输出的ui不是Dom对象，结构为：