sortable

<script src="http://cdn.bi-ci.com/static/sortable/Sortable.min.js"></script>

<script type="text/javascript">
    $('#topicSec li').addClass('move') ;
    Sortable.create(topicSec, {
      group: 'topicSec',
      animation: 100
    });

    document.getElementById('btnSave').addEventListener('click', function(event) {
      event.preventDefault();
      var listDisplayAreas = $('#topicSec li');
        $('#topicSec li').each(function(e,value){
            dataDisplayAreas.push({'id':$(this).children('a').attr('data'),'name':$(this).children('a').text()})
        });
      var request = new XMLHttpRequest();
      request.open('POST', '/channels_order', true);
      request.setRequestHeader('Content-Type', 'application/json');
      request.onload = function() {
        if (this.status >= 200 && this.status < 400) {
          showServerMsg('保存成功!','serve-msg-success');
          window.location= '/bang/';
        } else {
          showServerMsg('Error!','serve-msg-error');
        }
      };
      request.onerror = function() {
        alert('排序错误-_-#');
      };
      request.send(JSON.stringify(dataDisplayAreas));

    });

   </script>