easy-admin.js之layui+sortable图片上传及拖拽排序功能

已于 2023-03-31 17:23:16 修改
阅读量1.3k 收藏
点赞数 3
分类专栏： js 文章标签： layui 前端 javascript
于 2022-07-01 15:24:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41965172/article/details/125559230
版权

我用的是easy-admin 后台，thinkphp6+layui ，上传功能是已经封装好的，我做了一点点小的改动实现了上传后拖拽排序功能

html代码部分：

<style>
 
    .pic{ border: 1px solid #e2e2e2;
        background-position: center;
        float: left;
         padding: 5px 0 5px 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 8px;
        margin-top: 15px;
    }
   
.laypic1{
    min-height: 36px;
    margin-top: 10px;

}
</style>
 <div class="layui-form-item">
            <label class="layui-form-label required">购买须知</label>
            <div class="layui-input-block layuimini-upload">
                <input name="purchase" class="layui-input layui-col-xs6"   placeholder="请上传购买须知" value="{$row.purchase}" id="picture-purchase">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn layui-btn-sm" data-upload="purchase" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                    <span><a class="layui-btn layui-btn-normal layui-btn-sm" id="select_purchase" data-upload-select="purchase" data-upload-number="more" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                </div>
            </div>
        </div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="__STATIC__/admin/js/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

图片上传后通过如下放在了class名为layuimini-upload-btn div的后面

放图的部分节选，下面js有完整的 

 js部分代码：

sorts:function(uploadName){
                var sort = new Array();
                $('#laypic1-'+uploadName).find('.pic').each(function(index,element){
                    sort[index] = element.id;
                    //$(".oid"+element.id).html(index+1);
                });
                $("#picture-"+uploadName).val(sort.join('|'));
            },
            upload: function () {
                var uploadList = document.querySelectorAll("[data-upload]");
                var uploadSelectList = document.querySelectorAll("[data-upload-select]");

                if (uploadList.length > 0) {
                    $.each(uploadList, function (i, v) {
                        var exts = $(this).attr('data-upload-exts'),
                            uploadName = $(this).attr('data-upload'),
                            uploadNumber = $(this).attr('data-upload-number'),
                            uploadSign = $(this).attr('data-upload-sign');
                        exts = exts || init.upload_exts;
                        uploadNumber = uploadNumber || 'one';
                        uploadSign = uploadSign || '|';
                        var elem = "input[name='" + uploadName + "']",
                            uploadElem = this;

                        // 监听上传事件
                        upload.render({
                            elem: this,
                            url: admin.url(init.upload_url),
                            accept: 'file',
                            exts: exts,
                            // 让多图上传模式下支持多选操作
                            multiple: (uploadNumber !== 'one') ? true : false,
                            done: function (res) {
                                if (res.code === 1) {
                                    var url = res.data.url;
                                    if (uploadNumber !== 'one') {
                                        var oldUrl = $(elem).val();
                                        if (oldUrl !== '') {
                                            url = oldUrl + uploadSign + url;
                                        }
                                    }
                                    $(elem).val(url);
                                    $(elem).trigger("input");
                                    admin.msg.success(res.msg);
                                } else {
                                    admin.msg.error(res.msg);
                                }
                                return false;
                            }
                        });

                        // 监听上传input值变化
                        $(elem).bind("input propertychange", function (event) {
                            var urlString = $(this).val(),
                                urlArray = urlString.split(uploadSign),
                                uploadIcon = $(uploadElem).attr('data-upload-icon');
                            uploadIcon = uploadIcon || "file";
                            // console.log(uploadIcon)
                            $('#bing-' + uploadName).remove();
                            $('#laypic1-' + uploadName).remove();
                            if (urlString.length > 0) {
                                var parant = $(this).parent('div');
                                var liHtml = '';
                                $.each(urlArray, function (i, v) {
                                    if(uploadIcon=="video"){
                                            liHtml+=' <li><video  src="' + v + '" class="avatar" controls="controls" style="width: 150px;height: 150px;">您的浏览器不支持视频播放</video><small class="uploads-delete-tip bg-red badge" data-upload-delete="' + uploadName + '" data-upload-url="' + v + '" data-upload-sign="' + uploadSign + '">×</small></li>\n';
                                    }else{
                                        // liHtml += '<li class="pic" id="'+i+'"><a><img src="' + v + '" data-image  onerror="this.src=\'' + BASE_URL + 'admin/images/upload-icons/' + uploadIcon + '.png\';this.onerror=null"></a><small class="uploads-delete-tip bg-red badge" data-upload-delete="' + uploadName + '" data-upload-url="' + v + '" data-upload-sign="' + uploadSign + '">×</small></li>\n';
                                         liHtml +='<div class="pic" id="' + v + '"><img class="show-img" src="' + v + '" onerror="this.src=\'' + BASE_URL + 'admin/images/upload-icons/' + uploadIcon + '.png\';this.onerror=null"><small class="uploads-delete-tip bg-red badge" style="margin-top: -44px;margin-left: -23px;" data-upload-delete="' + uploadName + '" data-upload-url="' + v + '" data-upload-sign="' + uploadSign + '">×</small></div>';
                                        
                                    }
                                   
                                   
                                });
                                parant.after('<div id="laypic1-' + uploadName + '" class="laypic1">\n' + liHtml + '</div>');
                                // $("#laypic1-"+ uploadName).html(liHtml);
                                // parant.after('<ul id="bing-' + uploadName + '" class="layui-input-block layuimini-upload-show">\n' + liHtml + '</ul>');
                            }
                             $('#laypic1-' + uploadName).sortable().bind('sortupdate',function () {
                                var sort = $('#laypic1-' + uploadName).sortable("toArray");
                                admin.sorts(uploadName);
                            });
                        });

                        // 非空初始化图片显示
                        if ($(elem).val() !== '') {
                            $(elem).trigger("input");
                        }
                    });

                    // 监听上传文件的删除事件
                    $('body').on('click', '[data-upload-delete]', function () {
                        var uploadName = $(this).attr('data-upload-delete'),
                            deleteUrl = $(this).attr('data-upload-url'),
                            sign = $(this).attr('data-upload-sign');
                        var confirm = admin.msg.confirm('确定删除？', function () {
                            var elem = "input[name='" + uploadName + "']";
                            var currentUrl = $(elem).val();
                            var url = '';
                          
                            if (currentUrl !== deleteUrl) {
                                url = currentUrl.search(deleteUrl) === 0 ? currentUrl.replace(deleteUrl + sign, '') : currentUrl.replace(sign + deleteUrl, '');
                                $(elem).val(url);
                                $(elem).trigger("input");
                            } else {
                                $(elem).val(url);
                                $('#bing-' + uploadName).remove();
                                 $('#laypic1-' + uploadName).remove();
                            }
                           
                            $.ajax({
                                url:admin.url(init.del_url),
                                type: "get",
                                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                                dataType: "json",
                                data: {url:deleteUrl},
                                timeout: 60000,
                                success: function (res) {
                                    
                                },
                                error: function (xhr, textstatus, thrown) {
                                    admin.msg.error('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！', function () {
                                        
                                    });
                                    return false;
                                }
                            });
                            admin.msg.close(confirm);
                        });
                        return false;
                    });
                }

                if (uploadSelectList.length > 0) {
                    $.each(uploadSelectList, function (i, v) {
                        var exts = $(this).attr('data-upload-exts'),
                            uploadName = $(this).attr('data-upload-select'),
                            uploadNumber = $(this).attr('data-upload-number'),
                            uploadSign = $(this).attr('data-upload-sign');
                        exts = exts || init.upload_exts;
                        uploadNumber = uploadNumber || 'one';
                        uploadSign = uploadSign || '|';
                        var selectCheck = uploadNumber === 'one' ? 'radio' : 'checkbox';
                        var elem = "input[name='" + uploadName + "']",
                            uploadElem = $(this).attr('id');

                        tableSelect.render({
                            elem: "#" + uploadElem,
                            checkedKey: 'id',
                            searchType: 'more',
                            searchList: [
                                {searchKey: 'title', searchPlaceholder: '请输入文件名'},
                            ],
                            table: {
                                url: admin.url('ajax/getUploadFiles'),
                                cols: [[
                                    {type: selectCheck},
                                    {field: 'id', title: 'ID'},
                                    {field: 'url', minWidth: 80, search: false, title: '图片信息', imageHeight: 40, align: "center", templet: admin.table.image},
                                    {field: 'original_name', width: 150, title: '文件原名', align: "center"},
                                    {field: 'mime_type', width: 120, title: 'mime类型', align: "center"},
                                    {field: 'create_time', width: 200, title: '创建时间', align: "center", search: 'range'},
                                ]]
                            },
                            done: function (e, data) {
                                var urlArray = [];
                                $.each(data.data, function (index, val) {
                                    urlArray.push(val.url)
                                });
                                var url = urlArray.join(uploadSign);
                                admin.msg.success('选择成功', function () {
                                    $(elem).val(url);
                                    $(elem).trigger("input");
                                });
                            }
                        })

                    });

                }
            },

拖拽的部分单独截图拿出来，开始

结束

如果你是放在其它后台下用的也是layui 那么功能自行实现，不喜勿喷！！！本文只是记录项目中遇到的问题及最后解决的办法

小Hier
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片拖拽排序.zip
07-03
该资源改变自一个简单的jquery拖拽插件，添加了多个拖拽框进行拖拽，可以同时支持多个拖拽框的排序，这只是一个简单的demo，我后续也做了一些更复杂的功能，比如排序后获取排序顺序、还有打开一个拖拽框其他关闭、保存顺序后页面局部刷新等问题，有问题都可以和我探讨
使用layui的table显示图片
热门推荐
Android_la的博客
03-17 1万+
一. 问题背景 项目：一个商城 效果：如下 二. 解决方案 看了网上很多方法，但是99%是成功显示出来，但是按F12会看到有一个404报错。所以我们必须采用layui的tpl模板解决图片问题，才能完美显示并且不报错 定义一个tpl模板，用来支持图片 (第三行代码imgPath换成你自己要显示图片的field值），如下： <script type="text/html" id="imgT...
向layui模块中添加sorable
codeFly
01-10 293
1.拖拽时跳出新的tab.添加以下代码 <script> document.body.ondrop = function (e) { e.preventDefault(); e.stopPropagation(); } </script> 2.向某个模块中添加 render(){ !function(t){ "use strict"; if().... }(sort) }, sort(){ sortable主函数} 3.引用时，先运行 render();
layui图片管理器
weixin_40362806的博客
02-23 595
layui图片管理器
easyadmin 上传其他的文件，点击没有反应
f897907070的博客
08-16 508
easyadmin 上传其他的文件，点击没有反应。
EasyAdmin
yftyzs的博客
05-10 1741
EasyAdmin是基于ThinkPHP6.0+Layui的快速开发的后台管理系统。
layui图片上传+sortable图片拖拽排序功能
qq_42894991的博客
04-29 2166
1.安装插件 npm install sortablejs --save 通过layui+sortable实现图片上传以及拖拽排序功能 部分代码，后台tp {volist name='$list' id='case' key='key'}
layui列表拖动排序_通过拖动表格行进行行排序
weixin_39731271的博客
12-19 1815
参考原文链接：在最近的项目中，我们有这样一个需求，要手动拖动html table中的行(tr)进行排序，就是我可以将第一行拖到第三行，第四行拖到六行这样子。一开始我想起了jquery ui中的sortable，发现没有这样的例子。一筹莫展，于是谷歌之，发现了这位大神的回复。原来人家还是用了jquery ui的sortableHTML需要引入jquery和jquery ui的js文件No.YearT...
tp6+layUI多图片上传(带排序、删除)功能
quweiie的专栏
12-26 845
tp6+layUI多图片上传
【前端】Layui动态数据表格拖动排序
最新发布
qq_25285531的博客
09-01 3956
目的：使用Layui的数据表格，拖动行进行排序。使用插件：layui-soul-table 和 Layui结合Layui并参看官方教程，写的比较详细页比较简单。实现效果：可以拖动行进行排序，可以搜索。
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
jqueryUi的拖拽排序插件 jquery-ui-sortable.js
12-19
jqueryUI拖拽排序插件,单独的插件,可以独立使用!不必引入整个jqueryUi框架就可使用
laravel-admin-listbox-sortable:ListboxSortable是基于Laravel-admin表单组件的扩展，实现了listbox的拖拽排序功能
05-28
ListboxSortable for Laravel-admin 1.6+ListboxSortable是基于Laravel-admin表单组件的扩展，实现了listbox的拖拽排序功能。RequireLaravel-admin >= 1.6Installation运行下面的命令安装:"composer require ckhan/...
jquery.simulate.drag-sortable.js:在JQuery UI Sortable小部件内模拟拖动事件（主要用于集成测试）
05-18
在JQuery UI Sortable上模拟拖动尽管提供了模拟许多JQuery和JQuery UI事件的功能，但由于使JQuery UI Sortable小部件触发正确事件所需的复杂行为，因此它无法为JQuery UI Sortable小部件模拟拖动事件。 这个库允许您...
vue +el + Sortable table列拖拽排序
05-19
vue table 列拖拽排序例子
Sortable.js拖拽排序使用方法解析
10-21
主要为大家详细解析了Sortable.js拖拽排序使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
vue 使用 sortable 实现 el-table 拖拽排序功能 　本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：　npm 下载：　npm install sortablejs --save　引入：　import Sortable from ...
vuedraggable-Vue组件，允许与View-Model同步进行拖放排序。 基于Sortable.js。-Vue.js开发
05-27
基于并提供Sortable.js演示的所有功能实时演示https://sortablejs.github.io/Vue.Draggable/ https://david-desmaisons.github.io/draggable-example/功能完全支持Sortable.js功能：支持触摸设备支持拖动手柄和可选...
拖拽排及序自定义表单插件jquery-sortable.js
06-01
基于jquerystable的拖拽排序插件自定义表单
Vue3+element plus实现el-tab-pane拖拽排序(基于Sortable.js)
06-08
实现el-tab-pane拖拽排序的步骤如下： 1. 安装sortablejs和@vue/composition-api ``` npm install sortablejs @vue/composition-api --save ``` 2. 在Vue组件中导入Sortable和reactive ```javascript import Sortable from 'sortablejs'; import { reactive } from '@vue/composition-api'; ``` 3. 创建一个响应式对象来存储tab列表 ```javascript const tabs = reactive({ list: [ { label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }, { label: 'Tab 3', content: 'Content of Tab 3' } ] }); ``` 4. 在页面中使用el-tabs和el-tab-pane组件来展示tab列表，并使用v-for指令循环展示tab列表 ```html <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label"> {{ tab.content }} </el-tab-pane> </el-tabs> ``` 5. 在mounted钩子函数中使用Sortable创建可拖拽的tab列表，并监听其排序事件 ```javascript mounted() { let el = this.$el.querySelector('.el-tabs__nav-wrap'); new Sortable(el, { animation: 150, onEnd: (evt) => { let fromIndex = evt.oldIndex; let toIndex = evt.newIndex; tabs.list.splice(toIndex, 0, tabs.list.splice(fromIndex, 1)[0]); } }); } ``` 6. 完成后，你就可以在页面上看到一个可拖拽排序的tab列表了。 完整代码如下： ```html <template> <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label"> {{ tab.content }} </el-tab-pane> </el-tabs> </template> <script> import Sortable from 'sortablejs'; import { reactive } from '@vue/composition-api'; export default { name: 'SortableTabs', setup() { const tabs = reactive({ list: [ { label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }, { label: 'Tab 3', content: 'Content of Tab 3' } ] }); return { tabs }; }, mounted() { let el = this.$el.querySelector('.el-tabs__nav-wrap'); new Sortable(el, { animation: 150, onEnd: (evt) => { let fromIndex = evt.oldIndex; let toIndex = evt.newIndex; this.tabs.list.splice(toIndex, 0, this.tabs.list.splice(fromIndex, 1)[0]); } }); } }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值