表格-图片上传 div 拖动排序

我不是女神ヾ 2021-09-30 10:50 304阅读 0赞

需求:做一个在对一组图片上传后，返回图片信息，并且可以对图片拖动进行排序，编辑图文信息等。

> 一、引入必要文件,Jquery UI  Jquery

Jquery UI：[https://www.runoob.com/jqueryui/jqueryui-tutorial.html][https_www.runoob.com_jqueryui_jqueryui-tutorial.html]

Jquery  请自行到官网上下载  百度Jquery

bootstrap 的核心css 文件  请自行到官网上下载 百度bootstrap

如果嫌麻烦，可以直接下载Hadmin  这个模板，里面可以找到相关的js以及css文件

> 二、实现思路

要实现图片拖动排序，需要拿到图片数据集渲染在一个div盒子中，当我们上传组图完成后，服务器返回了图片的url地址，拿到这个地址数组后将数据循环渲染出来即可。

（1）需要一个容器，div

（2）拖动排序 实现代码

// 拖动排序
    $(".sortable-list").sortable({
        connectWith: ".connectList",
        cursor: "move",
        //排序拖放时的鼠标指针样式
        revert: true,
        //拖到新位置的时候动画效果
        opacity: "0.6",
        //排序拖拽的元素的透明度
        containmentType: "parent",
        placeholder: "portlet-placeholder ui-corner-all",
        //占位符
        start: function(event, ui) { //开始排序时调用
            old = $(this).sortable("toArray");
            console.log("老的数据:" + old);
        },
        update: function(event, ui) { //更新排序完成之后
            //console.log( $(this));
            newsArr = [];
            //记录下排序之前的顺序 id order
            $(".sortable-list").find(".sort_index").each(function() {
                var json = {
                    "sort": $(this).attr("sort-id"),
                    "order": $(this).attr("sort-order"),
                    "content": $(this).find("#content").val(),
                    "image": $(this).find("#img").attr("src")
                }
                newsArr.push(json)
            });
            console.log(newsArr);
            alert(JSON.stringify(newsArr));
            var $this = $(this);
        }
    }).disableSelection();

（3）上传图片的事件，这里我用的是fileUploader的一个插件，大家可以用其他插件，这儿只是说下思路，就是得到图片（多图）上传后服务器返回给我们的数据集，渲染在刚刚我们写的div盒子里

// 上传完成后的事件
    fileUploader2.bind('UploadComplete',
    function(uploader, files) {
        //console.log(files);
        filesNew = files;
        var html = '';
        $.each(filesNew,
        function(i, v) {
            var now = new Date();
            var year = now.getFullYear().toString(); //得到年份
            var month = (now.getMonth() + 1).toString(); //得到月份
            if (month.length <= 1) {
                month = '0' + month;
            }
            var date = now.getDate(); //得到日期
            var time = year + month + "/" + date;
            var src = "<?= UPLOAD_URL . 'wangpan/admin/' ?>" + time + "/" + v.name
            var today = year + "." + month + "." + date;
            console.log(src);
            var index_ = Number(i) + 1; // 处理字符串不相加
            var indexArr = [];
            indexArr = {
                index: index_,
                id: v.id
            };
            // 开始组装html
            html += '<li class="success-element sort_index" id="sort_index' + index_ + '" sort-id="sort' + index_ + '" sort-order="order' + index_ + '" style="height:100px">';
            html += '<input type="hidden" value="1" id="sort">';
            html += "<a class='pull-left' onclick='view(" + JSON.stringify(src) + ")'>";
            html += '<img alt="image" class="img" height="80" id="img" width="114" src="' + src + '">';
            html += '  </a>';
    
            html += '<div class="pull-left" style="padding-left: 5%">';
            html += "添加一段图片的简介";
            html += '<div class="agile-detail">';
            html += '<textarea class="comments" rows="3%"   name="content" id="content" cols="90%"   onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>';
            html += '</div>';
            html += '</div>'html += '<div class="media-body" style="padding-left: 1%">';
            html += '<div class="agile-detail">';
            html += "<a href='javascript:void(0)' class='pull-right btn btn-xs btn-danger btn-rounded' onclick='delHtml(" + JSON.stringify(indexArr) + ")'>删除</a>";
            html += '</div>';
            html += '</div>'html += '</li>';
            $("#abc").html(html);
        });
    });
    
    // 图片预览
    view = function(src) {
        var url = '?app=zone&controller=wangpan&action=view';
        var html = '<img src="' + src + '"  width="100%" height=""/>';
        var index = layer.open({
            type: 1,
            title: '预览',
            shadeClose: true,
            shade: [0.5, '#000'],
            //配置遮罩层颜色和透明度
            maxmin: false,
            //开启最大化最小化按钮
            area: ['95%', '95%'],
            content: html,
            //btn: ['确定', '取消'],
            success: function(layero, index) {
                //var body = layer.getChildFrame('body',index);//建立父子联系
                //var iframeWin = window[layero.find('iframe')[0]['name']];
                //var inputList = body.find('img');
                //$(inputList[0]).src(obj.filepath);
            },
            yes: function(index, layero) {
                //var htmlStr = layero.find("iframe")[0].contentWindow.$("#htmlStr").val(); 
                layer.close(index);
            },
            cancel: function(index) {
                layer.close(index);
            }
        });
    }
    
    // 删除图片列表
    delHtml = function(index) {
        $(".sortable-list").find("#sort_index" + index.index).remove();
        console.log(typeof filesNew);
        $.each(filesNew,
        function(i, v) {
            if (v.id == index.id) {
                filesNew.splice(i, 1);
                layer.msg("删除当前行成功");
            }
        });
        console.log(filesNew);
    }

> 上个效果图

![20190830184319553.gif][]

[https_www.runoob.com_jqueryui_jqueryui-tutorial.html]: https://www.runoob.com/jqueryui/jqueryui-tutorial.html
[20190830184319553.gif]: /images/20210809/e567db77649f4b8989f0992880403a12.png