HTML，JQ/JS + PHP 分类上下移动 （附带源码）

<td class="td-operation" align="center">
                <a href="###" id="updates" class="operation-update theme_text_color" data-id="<?php echo $v['id'];?>">编辑</a>
                <input type="hidden" value="<?= $v['id']; ?>" id='categoryid' name="categoryid"/>
                <?php if( ($k+1)!=1 ): ?>
                    <a style="padding-left:0;" href="javascript:void(0)" title="上移" data-id="<?= $v['id']; ?>" class="operation-update up theme_text_color" data-pid="<?= $v['pid']; ?>">上移</a>
                <?php endif; ?>
                <?php if( ($k+1)!= $num): ?>
                    <a style="padding-left:0;" href="javascript:void(0)" title="下移"  data-id="<?= $v['id']; ?>" class="operation-update down theme_text_color"  data-pid="<?= $v['pid']; ?>">下移</a>
                <?php endif; ?>
                <a class="operation-update theme_text_color" href="#" onclick="f1(<?php echo  $v['id'] ?>)">删除</a>
            </td>

<script>
    $(function () {
        $(".instroction").each(function(){
            var maxwidth=30;
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+"...");
            }
        });

        $('.view-index-list').on("click",'.down', function() {
            var $tr = $(this).parents("tr");
            var len = $tr.parent('tbody').children('tr').size();
            var dataid = $(this).data('id');

            var siblingsId = $(this).parents("tr").next('tr').children('td').children("#categoryid").val();
            var requestUrl = '<?php  echo $this->createUrl('questionsSort');?>/type/' + 'down' + '/sortid/' + dataid + '/siblingsId/'+ siblingsId;
            $.ajax( {
                type: 'get',
                url: requestUrl,
                success:function (data) {
                    var datas = eval("("+ data +")");
                    if(datas.code == 200){
                        history.go(0);
                        // downDocument($tr,len);
                    }else if (datas.code == 400 && datas.status == 2){
                        alert('已经是最下层级了');
                    }else if(datas.code == 500){
                        alert('只能同级移动');
                    }
                }
            })
        });

        $('.view-index-list').on("click",'.up', function() {
            // alert('hello');
            console.log($(this).data())
            var $tr = $(this).parents("tr");
            var len = $tr.parent('tbody').children('tr').size();
            var dataid = $(this).data('id');
            var siblingsId = $(this).parents("tr").prev('tr').children('td').children("#categoryid").val();
            // console.log($tr,len,dataid,siblingsId)
            requestUrl = '<?php echo $this->createUrl('questionsSort');?>/type/' + 'up' + '/sortid/' + dataid + '/siblingsId/'+ siblingsId;
            $.ajax({
                type:'get',
                url:requestUrl,
                success:function (data) {
                    var datas = eval("("+ data +")");
                    console.log(datas);
                    console.log(typeof (datas));
                    if(datas.code==200){
                        history.go(0);
                        // UpDocument($tr, len);
                    }else if(datas.code == 400 && datas.status == 1){
                        alert('已经是最上层级了');
                    } else if(datas.code == 500){
                        alert('只能同级移动');
                    }
                }
            })
        });

        //下移td
        function downDocument($tr, len) {
            number_pre = $tr.children('td').eq(0).html();
            number_next = $tr.next('tr').children('td').eq(0).html();

            $tr.fadeOut().fadeIn();
            $tr.next().after($tr);
            //设置下移之后的序号
            $tr.children('td').eq(0).html(number_next);
            $tr.prev('tr').children('td').eq(0).html(number_pre);

            if ($tr.prev('tr').copyindex() == 0) {
                $tr.prev('tr').children('td').eq(3).find('.up').remove();
            }
            var this_index = $tr.copyindex();
            if (this_index == 1) {
                var categoryid = $tr.children('td').eq(3).find("#categoryid").val();
                var string = '<a style="padding-left:0;" href="javascript:void(0)" title="上移" data-id=' + categoryid + ' class="operation-update up">上移</a>';
                $tr.children('td').eq(3).find('#categoryid').after(string);
            }
            if ((this_index + 1) == len) {
                $tr.children('td').eq(3).find('.down').remove();
                var categoryid = $tr.prev('tr').children('td').eq(3).find("#categoryid").val();
                var string = '<a style="padding-left:0;" href="javascript:void(0)" title="下移"  data-id=' + categoryid + ' class="operation-update down"> 下移</a>';
                $tr.prev('tr').children('td').eq(3).find('.up').after(string);
            }

        }

        //上移td
        function UpDocument($tr, len) {
            number_pre = $tr.children('td').eq(0).html();
            number_parent = $tr.prev('tr').children('td').eq(0).html();
            $tr.fadeOut().fadeIn();
            $tr.prev().before($tr);
            $tr.children('td').eq(0).html(number_parent);
            $tr.next('tr').children('td').eq(0).html(number_pre);

            var this_index = $tr.copyindex();
            if (this_index == 0) {
                $tr.children('td').eq(3).find('.up').remove();

                var categoryid = $tr.next().children('td').eq(3).find("#categoryid").val();
                var string = '<a style="padding-left:0;" href="javascript:void(0)" title="上移" data-id=' + categoryid + ' class="operation-update up">上移</a>';
                $tr.next().children('td').eq(3).find('#categoryid').after(string);
            }
            if ((this_index + 1) == (len - 1)) {
                $tr.next('tr').children('td').eq(3).find('.down').remove();
                var categoryid = $tr.children('td').eq(3).find("#categoryid").val();
                var string = '<a style="padding-left:0;" href="javascript:void(0)" title="下移"  data-id=' + categoryid + ' class="operation-update down"> 下移</a>';
                $tr.children('td').eq(3).find('.up').after(string);
            }

        }

    })
    function gobacke(){
        location.href= "<?= $this->createUrl('/train/train/index'); ?>";
    }

</script>

/**
     * AppLication: getCategorySort
     * Author: C
     * @param $config
     * @param type :类型 (up:上移，down:下移)
     * @param sortid ：选择的要被 上移 或者 下移 的 id
     * @param superiorId ：选择的要被 上移 或者 下移 的 id 的上一级 的 id
     * @return array
     * @Created on 2022/3/22 15:17
     * thinking:
     * 1.接前端传过来的点击的id，通过id找到这条数据，
     * 2.判断 type 类型是上移还是下移，上移 减一，下移加一
     * 3.找到 加一或者减一的 和选择的id 同级的 数据 $superiorId
     * 4.判断 $superiorId 是否为空，为空则证明只有一个，或者是第一个，或者是最后一个
     * 5.不为空情况下，开事务，更新两条数据的排序，【例如：上移，排序 1 的变成 2 ，排序 2 的变成 1】
     * 6.提交 并且ajax返回数据
     */
public function getCategorySort($config){
        $sortData = $this->sortData($config['sortId']);
        $sortInt = $config['type'] == 'up' ? $sortData->listorder -1 :$sortData->listorder + 1;
        $superiorId = $this->selectAll($config['sortId'],$sortInt);
        $data = [];
        if(!empty($superiorId)){
            $transaction = Yii::app()->db->beginTransaction();
            try {
                $superiorId->listorder = $sortData->listorder;
                $sortData->listorder = $sortInt;
                if(!$sortData->save() || !$superiorId->save()){
                    throw new \yii\base\ErrorException('error');
                }
                $transaction->commit();
                $title = '排序成功';
            }catch (Exception $e){
                $transaction->rollback();
                $title = '排序失败';
            }
            $data['code'] = ($title== '排序成功') ? 200 : 201;
            $data['msg'] = $title;
            echo json_encode($data, true);
        }else{
            $parentId = TrainingCategory::model()->find('eid = :eid AND id = :id',[':eid'=>Yii::app()->user->eid,':id'=>$config['siblingsId']]);
            if(($config['type'] == 'up' && $config['siblingsId'] == 'undefined') || ($config['type']  == 'down' && $config['siblingsId'] == 'undefined')){
                $data['code'] = 400;
                $data['msg'] = '排序失败';
                $data['status'] = $config['type'] == 'up' ? 1 : 2;
            }else if(($config['type'] == 'up' && $sortData->pid == $config['siblingsId']) || ($config['type'] == 'down' && $sortData->pid != $parentId->pid)){
                $data['code'] = 500;
                $data['msg'] = '排序失败';
            }else{
                $transaction = Yii::app()->db->beginTransaction();
                try {
                    $sortData->listorder = $parentId->listorder;
                    $parentId->listorder = $sortInt;
                    if(!$parentId->save() || !$sortData->save()){
                        throw new \yii\base\ErrorException('error');
                    }
                    $transaction->commit();
                    $data['code'] = 200;
                    $data['msg'] = '成功';
                }catch (Exception $e){
                    $transaction->rollback();
                    $title = '排序失败';
                }
            }
        }
        return $data;
//        return  json_encode($data, true);
    }