1.引入文件

<script src="{sh::PUB}js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">
<script src="{sh::PUB}js/jquery-ui.min.js"></script>

2.给元素附上sortable类

<tbody class="sortable">
  <tr></tr>
  <tr></tr> 
</tbody>

3.开启并配置

$(function() {
  $(".sortable").sortable({
    cursor: "move",
    items: "tr", //只是tr可以拖动
    opacity: 0.6, //拖动时，透明度为0.6
    revert: true, //释放时，增加动画
    update: function(event, ui) { //更新排序之后
      var categoryids = $(this).sortable("toArray");
      var $this = $(this);
      $.ajax({
        url: '{sh::U("AgentGoods/ajax","todo=categoryDragsort")}',
        type: 'POST',
        data: 'categoryids=' + categoryids,
        success: function(json) {
          if (json == 1) {
            layer.msg('移动成功', {
              icon: 1
            });
          } else {
            $this.sortable("cancel");
            layer.msg('移动失败', {
              icon: 2
            });
          }
        }
      });
    }
  });
  $(".sortable").disableSelection();
});

4.后台处理

$categoryids  = $this->_post('categoryids');
$categoryidsArr = explode(",",$categoryids);
foreach ($categoryidsArr as $k => $v) {
  $data['sort'] = count($categoryidsArr) - $k;
  $data['id']  = $v;
  M('Agentgoods_category')->where(array('id'=>$v))->save($data);
}
exit('1');

小结：这种排序，不是交换，而是彻底的整体调整

以上这篇通过jquery-ui中的sortable来实现拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。

基于JQuery实现图片上传预览与删除操作
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码，经测试目前满足谷歌、火狐、360、IE6,7,8,9,10,11等浏览器，供大家参考，具体内容如下1.

jQuery前端开发35个小技巧
废话不说直接代码，有问题可以一起交流1.禁止右键点击$(document).ready(function(){$(document).bind("contextmenu",function(e){returnfalse;});});2.隐藏搜索文本框文字Hidewhe

实例解析jQuery中proxy()函数的用法
jQuery.proxy(),接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文(context)语境。jQuery.proxy(function,context)function将要改变上下文语