cltphp上传多张图左右调整图片顺序

先修改extend下的form.php的images

    public function images($info, $value)
    {
        $info['setup'] = is_array($info['setup']) ? $info['setup'] : string2array($info['setup']);
        $field = $info['field'];
        $action = Request::action(true);
        if ($action == 'add') {
            $value = $value ? $value : (isset($info['setup']['default']) ? $info['setup']['default'] : '');
        } else {
            if (isset($this->data[$field]) && $this->data[$field]) {
                $images = $this->data[$field];
            } else {
                $images = '';
            }
            $value = $value ? $value : $images;
        }
        $data = '';
        $i = 0;
        $aids = '';
        if ($value) {
            $options = json_decode($value, true);
            if (is_array($options)) {
                foreach ($options as $k => $r) {
                    $aids .= $k . ',';
                    $data .= '
                    <li class="pics_box">
                    <div class="layui-col-md3">
                        <div class="dtbox">
                            <img src="' . $r . '" class="layui-upload-img">
                            <input type="hidden" name="' . $field . '[' . $k . ']" class="' . $info['class'] . '" value="' . $r . '">
                            <input type="hidden" class="oldaid" name="aids[' . $field . '][]" value="' . $k . '">
                            <i class="delimg layui-icon ">&#x1006;</i>
                            <i class="toleft left' . $info['class'] . ' layui-icon ">&#xe603;</i>
                            <i class="toright right' . $info['class'] . ' layui-icon">&#xe602;</i>
                        </div>
                    </div>
                    </li>';
                }
            }
        }
        $parseStr = '<div class="layui-col-md6">';
        $parseStr .= '<div class="layui-upload">';
        $parseStr .= '<button type="button" class="layui-btn" id="' . $info['class'] . '">多图片上传</button> <button type="button" data-input="' . $info['class'] . '" data-aids="' . substr($aids, 0, -1) . '" class="layui-btn layui-btn-normal" layadmin-event="getAttaImgs">选择图片</button >';
        $parseStr .= '<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">';
        $parseStr .= '预览图：<div class="layui-upload-list" id="demo' . $info['class'] . '">
        <div class="layui-row layui-col-space10"><ul>' . $data . '</ul></div></div> </blockquote></div></div>';
        $parseStr .= "<script>
                        layui.use('upload', function () {
                            var upload = layui.upload;
                            var imagesSrc;
                            upload.render({
                                elem: '#" . $info['class'] . "',
                                url: '" . url('Upfiles/upimage') . "',
                                multiple: true,
                                done: function(res){
                                    $('#demo" . $info['class'] . " .layui-row ul').append('<li class=\"pics_box\"><div class=\"layui-col-md3\"><div class=\"dtbox\"><img src=\"'+ res.url +'\" class=\"layui-upload-img\"><input type=\"hidden\" class=\"imgVal\" name=\"" . $field . "['+res.aid+']\" value=\"'+ res.url +'\"> <input type=\"hidden\" name=\"aids[" . $field . "][]\" class=\"oldaid\" value=\"'+res.aid+'\"><i class=\"delimg layui-icon\">&#x1006;</i><i class=\"toleft left" . $info['class'] . " layui-icon \">&#xe603;</i><i class=\"toright right" . $info['class'] . " layui-icon\">&#xe602;</i></div></div></li>');
                                    imagesSrc +=res.url+';';
                                }
                            });
                        })
                    </script>";
        $parseStr .= '<script>
                        $("body").on("click",".layui-row ul li .left' . $info['class'] . '",function(){
                            var li_index=$(this).closest("li").index();
                            if(li_index>=1){
                                $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
                            }
                        });
                        $("body").on("click",".layui-row ul li .right' . $info['class'] . '",function(){
                            var li_index=$(this).closest("li").index();
                            $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
                        });
                        </script>';
        return $parseStr;
    }

再修改/fly/src/layuiadmin/modules/content.js 的多图

    //多图
    admin.events.getAttaImgs = function (images) {
        var imgId = images.data('input');
        var oldAids = '';
        var box = images.siblings('blockquote').children('#demo'+imgId).children('.layui-row').children('ul');
        box.find('.oldaid').each(function(){
            oldAids+=$(this).val()+',';
        });
        var that = this;
        layer.open({
            type: 2
            ,title: '图片资源'
            ,area: ['700px', '690px']
            ,shade: 0
            ,anim: 1
            ,content: '/admin/attachment/getList.html?type=2&oldAids='+oldAids
            ,btn: ['选择','取消'] //只是为了演示
            ,yes: function(index){
                var body = layer.getChildFrame('body', index);
                var imgHtml='';
                body.find('.select').each(function(){
                    var aid = $(this).data('id');
                    var url = $(this).data('url');
                    imgHtml +='<li class="pics_box"><div class="layui-col-md3">' +
                        '<div class="dtbox"><img src="'+url+'" class="layui-upload-img">' +
                        '<input type="hidden" name="'+imgId+'['+aid+']" class="'+imgId+'" value="'+url+'">' +
                        '<input type="hidden" name="aids['+imgId+'][]" class="oldaid" value="'+aid+'"><i class="delimg layui-icon">&#x1006;</i><i class="toleft left'+imgId+' layui-icon ">&#xe603;</i><i class="toright right'+imgId+' layui-icon">&#xe602;</i></div></div></li>';
                });
                box.append(imgHtml);
                layer.close(index);
            }
            ,btn2: function(){
                layer.closeAll();
            }
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero,index){
            }
        });
    };

最后添加css

<style>
.toleft{ color: #000; display: none;}
.toright{ color: #000; display: none;}
.toleft{ position: absolute;top: 60px; left: 2px; cursor:pointer;}
.toright{ position: absolute;top: 60px; right: 2px;cursor:pointer;}
.pics_box:hover .toleft{ color: #333;font-size:22px;display: block;}   
.pics_box:hover .toright{ color: #333;font-size:22px;display: block;}   

.tit_toleft{ color: #000; display: none;}
.tit_toright{ color: #000; display: none;}
.tit_toleft{ position: absolute;top: 60px; left: 2px; cursor:pointer;}
.tit_toright{ position: absolute;top: 60px; right: 2px;cursor:pointer;}
.pics_box:hover .tit_toleft{ color: #333;font-size:22px;display: block;}   
.pics_box:hover .tit_toright{ color: #333;font-size:22px;display: block;} 
</style>

上效果图