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

前端技术 2023/09/01 JavaScript

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来实现拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/1393

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案