jquery+html实现图片拖拽排序

html代码如下：

<style>
    .qyzp-card img{
        width: 12vw;
        height: 7.5vw;
        border-radius: 5px;
        margin-right: 5px;
    }
    .qyzp-card>img:LAST-CHILD{
        margin-right: 0;
    }
</style>

<div id="imgs" style="display: flex">
     <img id="1j" class="abc" src="/images/1.jpg">
     <img id="2j" class="abc" src="/images/2.jpg">
     <img id="3j" class="abc" src="/images/3.jpg">
     <img id="4j" class="abc" src="/images/4.jpg">
     <img id="5j" class="abc" src="/images/5.jpg">
</div>

可以把布局调成如下形式，横向排列

 

JavaScript代码如下：

<script type="text/javascript">
    var yqyc_page = {
        cloneObj: null,
        enterImgId: null,
        oldImg: null,
        doSortImg:function (){
            var ids=[]
            $.each($('#imgs').find('img'), function(i, n){
                ids.push($(n).attr('id'))
            });
            //此处为后端排序代码，可以根据每个图片id在数组中的位置排序
            $.ajax({
                type: "POST",
                url: "<c:url value='/bi/companyinfo/query/sortPhoto'/>",
                data: {
                    ids: ids.join(",")
                },
                success: function (data) {
                }
            });
        }
    ｝


    $(function () {
        $(".abc").on("dragover", function(e){
            e.preventDefault();
        });
        $(".abc").on("dragstart", function(e){
            yqyc_page.cloneObj = $(e.target).clone()
            yqyc_page.oldImg=$(e.target)
        });
        $(".abc").on("dragenter", function(e){
            yqyc_page.enterImgId = e.target.id
            $('#123456').remove()
            if(yqyc_page.oldImg.attr('id')!=e.target.id){
                $('#'+yqyc_page.enterImgId).before($('<div id="123456" class="img-container" style="border: 1px solid grey;border-radius: 5px;font-size:medium;display: flex;justify-content: center;align-items: center">放这里</div>'))
            }
        });
        $(".abc").on("dragend", function(e){
            if(yqyc_page.enterImgId!=null&&yqyc_page.enterImgId!=e.target.id){
                $('#123456').before(yqyc_page.oldImg)
                yqyc_page.doSortImg()
            }
            $('#123456').remove()
            yqyc_page.enterImgId=null
        });

    });
</script>

 最终实现的效果如下：

VID_20231219_111858