最近遇到需要使用拖拽改变列表排序的需求，实现的过程倒是相对简单，问题点在于这个拖拽改变排序的缺点是对于其他页码的数据，无法跨页改变排序，所以只能通过拖拽排序和手动输入序号改变排序。以下是实现思路：HTML：引入jquery-ui.min.js，jquery-ui.min.css文件

列表结构部分：

Sortable的类名用于js的调用；id是数据的id，用于后台修改对应id数据的排序；disable的类名，用于禁止该tr进行拖拽；tbody class=sortable{foreach name=list[list] item=vo}tr id={$vo[id]}td class=col-50input type=checkboxclass=child name=selid[] value={$vo.id} lay-skin=primary/td!-- tdinput type=text placeholder=排序 autocomplete=offclass=layui-input sort data-id={$vo.id} url={:url(sort)} lay-filter=sort value={$vo.sort}/td --tddiv class=layui-table-cell laytable-cell-1-0-5span{$vo.sort}/span/div/tdtd style=background: #cccc;div class=layui-table-cell laytable-cell-1-0-5a href=javascript:; onClick=showImg(this)data-href={$vo.picture|ImgPath}img src={$vo.picture|ImgPath}width=80/a/div/tdtddiv class=layui-table-cell laytable-cell-1-0-5span{$vo.title}/span/div/tdtd class=layui-form col-80input type=checkbox lay-verify=required lay-filter=status name=is_indexdata-id={$vo.id} lay-skin=switch url={:url(status)} lay-text=是|否 value=1 {ifcondition=$vo[is_index] eq 1 }checked{/if}/tdtd class=layui-form col-80input type=checkbox lay-verify=required lay-filter=status name=statusdata-id={$vo.id} lay-skin=switch url={:url(status)} lay-text=正常|禁止 value=1 {ifcondition=$vo[status] eq 1 }checked{/if}/tdtddiv class=layui-table-cell laytable-cell-1-0-5span{$vo.create_time}/span/div/tdtd class=col-150div class=layui-table-cell laytable-cell-1-0-5a href={:url(edit,array(id=$vo[id]))} data-width=100%data-height=100% title=修改信息class=layui-btn layui-btn-normal layui-btn-xs fw_openi class=layui-icon layui-icon-edit/i修改/aa href={:url(copy,array(id=$vo[id]))} data-width=100%data-height=100% title=复制信息class=layui-btn layui-btn-xs fw_openi class=layui-icon layui-icon-edit/i复制/aa href={:Url(delete,array(id=$vo[id]))} title=确定要删除吗？class=layui-btn layui-btn-danger layui-btn-xs fw_deletei class=layui-icon layui-icon-delete/i删除/a/div/td/tr{/foreach}tr class=disabletd colspan=100span type=submit href={:url(delete)} class=fw_all_delete layui-btn layui-btn-sm layui-btn-danger i class=layui-icon layui-icon-delete/i删除/span/td/tr/tbodyJS代码：

script$(function() {$(.sortable).sortable({cursor: move,items: tr:not(.disable), //只是tr可以拖动cancel: .disable,opacity: 0.6, //拖动时，透明度为0.6revert: true, //释放时，增加动画axis: y,//只能在水平或垂直方向上被拖拽,x,ydelay:150,//鼠标按下后直到排序开始的时间，以毫秒计update: function(event, ui) { //更新排序之后var sort = $(this).sortable(toArray, {attribute: id});//获取改变顺序后的idvar page = $(.pagination).find(li.active span).text();//获取当前页码console.log(sort);var $this = $(this);$.ajax({url: {:url(edit_sort)},type: post,data: {sort: sort,page:page,},success: function(json) {if (json == 1) {layer.msg(移动成功, {icon: 1});window.location.reload(.content-iframe)} else {$this.sortable(cancel);layer.msg(移动失败, {icon: 2});}}});}});$(.sortable).disableSelection();});/script后台代码：

public function edit_sort(){if ($this-request-isAjax()) {$param = $this-request-post();$sort = $param[sort];$page = $param[page];if(empty($page)){$page = 1;}foreach ($sort as $k = $v) {$data[sort] = (($page-1)*10)+($k+1);$this-ModelObj-where(id, $v)-save($data);}$json = 1;return json($json);}}jquery-ui直接去官网下载即可。

利用jquery-ui实现后台列表的拖拽排序_成都网站制作   https://www.cdnanqi.cn/wangzhanzhizuo/10940.html