新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

通过jquery-ui中的sortable来实现拖拽排序的简单实例

图片 1

图片 2

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完毕tag便签去重功用的点子
  • jQuery表格排序组件-tablesorter使用示例
  • jquery中的sortable排序之后的保留景况的消除格局
  • jquery tablesorter.js 帮衬汉语表格排序革新
  • jQuery利用sort对DOM成分进行排序操作
  • jquery.tableSort.js表格排序插件使用方法详解
  • jquery中push()的用法(数组添比索素)
  • jquery遍历数组与筛选数组的形式
  • Jquery 数组操作大全个人总计
  • jQuery简单完成对数组去重及排序操作实例

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:通过jquery-ui中的sortable来实现拖拽排序的简单实例

您可能还会对下面的文章感兴趣: