源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-01-14 07:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:通过jquery-ui中的sortable来实现拖拽排序的简单实例
[img]http://files.jb51.net/file_images/article/201605/20160524161625.jpg[/img] [img]http://files.jb51.net/file_images/article/201605/20160524161633.jpg[/img] 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');
[b]小结:[/b]这种排序,不是交换,而是彻底的整体调整 以上这篇通过jquery-ui中的sortable来实现拖拽排序的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部