返回新闻列表

pbootcms后台自定义字段多图上传 不能多图拖动解决办法

发布日期: 2025-05-25 | 来源: 智软设计工作室

修改\apps\admin\view\default\content\content.html底部拖动js代码。如下。即可解决自定义上传多图不能拖动的问题,

<script type="text/javascript">

/*
$("#pics_box").dragsort({
    dragSelector: "dl",
    dragSelectorExclude: "input,textarea,dd",
    dragBetween: false,
    dragEnd: saveOrder,
    placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});



function saveOrder() {
    var data = $("#pics_box dl dt img").map(function() {
        return $(this).data("url");
    }).get();
    $("input[name=pics]").val(data.join(","))
};

*/


// 定义一个通用的拖动排序函数
function setupDragSort(boxId, inputName) {
    $(`#${boxId}`).dragsort({
        dragSelector: "dl",
        dragSelectorExclude: "input,textarea,dd",
        dragBetween: false,
        dragEnd: function() {
            saveOrder(boxId, inputName);
        },
        placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
    });
}

// 定义保存排序结果的函数
function saveOrder(boxId, inputName) {
    var data = $(`#${boxId} dl dt img`).map(function() {
        return $(this).data("url");
    }).get();
    $(`input[name=${inputName}]`).val(data.join(","));
}

// 初始化每个元素的拖动排序功能
setupDragSort("pics_box", "pics");
setupDragSort("ext_yszp_box", "ext_yszp");
setupDragSort("ext_xiaogutu_box", "ext_xiaogutu");
setupDragSort("ext_caipingtu_box", "ext_caipingtu");
setupDragSort("ext_wangongtu_box", "ext_wangongtu");








</script>


推荐技术资料

滚动倒退后保留 wow.js 动画效果 解决办法

2023-06-30

如果你希望在滚动倒退后保留 wow.js 动画效果,可以尝试将 resetAnimation 设置为 false。varwow=newWOW({resetAnimation:false,})wow.init();

阅读更多

html5 video 去除下载和画中画 和全屏按钮

2022-10-20

css/*所有控件video::-webkit-media-controls-enclosure{display: none;}*/video::-webkit-media-controls-fullscreen-button {display: none;}controlsList='nodownload' 去除下载disablePictureInPicture 去除画中画<video width="100%" height="100%" preload="

阅读更多

背景在下面 字体在上面中心透明效果,css属性mix-blend-mode

2023-04-06

效果如下,div代码如下:<div class="h_1"><span>002t.cn<br>DESIGN&amp;<br><b>网站建设</b></span></div>css代码如下:.h_1{ position: absolute; background

阅读更多

{content:tags}关联文章 以及判断tags是否为空

2022-07-15

tags关联文章{content:tags}{pboot:if('{content:tags}'=='')} 空{else}手册:{pboot:list scode=40 tags={content:tags}}<p><a href="[list:link]">[list:title]</a></p>{/pboot:list}常见问题:{pboot:list scode=41 tags={content:tags}}<

阅读更多

阿里云虚拟主机和阿里云云服务器phpmailer提示Failed to connect to server: ()解决方法

2022-12-22

阿里云虚拟主机和阿里云云服务器phpmailer无法发邮件,提示无法链接,解决办法如下:如果是虚拟主机。进入控制面板:启用PHP函数fsockopen。如果是云服务器也要启用这个函数。和网络策略里ssl端口465

阅读更多

swiper里面如果又视频和图片,css将视频100%铺满,不撑高解决办法

2024-08-20

swiper里面如果又视频和图片,由于视频客户比例和图片不对。会导致高度不一样。会导致swiper高度撑高,其他比例少的就会又空白,由于考虑图片自适应。没有采用背景,背景的话。有些是显示不完全,只能像办法css裁剪掉视频,里面视频样式用这个即可。 .swiper-containervd .swiper-slide video {

阅读更多

pbootcms 列表页加入标题搜索功能,pboot:list添加列表直接搜索 -不用跳转到搜索页面

2023-07-10

最近制作网站的时候。因为搜索的地图比较多。比如常见问题和经销商,产品,都得搜索,用传统得{pboot:scaction} 他都会到统一得页面去,当然页可以用 <input type="hidden" name="searchtpl" value="1.html" >,置顶不同模板,但是置顶后。有些问题。比如栏目封面和

阅读更多

网站自动翻译成英文,谷歌翻译api,怎样能打开网站默认自动翻译

2021-11-10

测试可用,就是要加载下js网站自动翻译成英文谷歌翻译api,怎样能打开网站默认自动翻译,设置Cookie就行了。也可以做多语言翻译。去除隐藏css选择项就行了。<style><!--隐藏长条-->.goog-te-banner-frame.skiptranslate { display: none !important;} body { top: 0px !important; }.goog-t

阅读更多

禁止复制功能,实用于电脑pc和移动手机端触屏浏览器

2023-02-22

需要添加一段css代码:* { -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none;/*webkit浏览器*/ -khtml-user-select:none;/*早起浏览器*/ -moz-user-select:none;/*火狐浏览器*/ -

阅读更多