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

本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

修改ppsdminiewdefaultcontentcontent.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>

广东鲸弘科技有限公司专注惠州网站建设、惠州小程序开发、企业官网定制、微信小程序开发等服务，欢迎咨询合作。