拖拽图片切换顺序

html 需要用到bootstrap4.5 css

<div id="pictureList" class="p-4 border rounded">
    <div class="row mx-n2">

        <div class="img-main px-2">
            <div class="img-div img-thumbnail position-relative" draggable="true">
                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="~/Upload/006762ca-8000-45c7-8535-eae106c97ee7.jpg" draggable="false" alt="" />
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic"> 设为主图</a>
                <a href="javascript:;" class="delPic ml-auto">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div id="img2" class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic.9ht.com/up/2018-4/2018041015541653038.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic"> 设为主图2</a>
                <a href="javascript:;" class="delPic ml-auto">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic.rmb.bdstatic.com/9619bd4b6f54160c5c81c6525f35f88b.jpeg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic ">设为主图4</a>
                <a href="javascript:;" class="delPic ml-auto">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图41</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图1</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图2</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图3</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图4</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图5</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图6</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图7</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
        <div class="img-main px-2">
            <div class="img-div  img-thumbnail position-relative" draggable="true">

                <span class="text-primary main-pic-text" style="position:absolute;right:0.5em;display:none;">主图</span>
                <img class="img-fluid h-100" src="http://pic5.photophoto.cn/20071217/0008020241208713_b.jpg" draggable="false"
                     alt="通用的占位符缩略图">
            </div>
            <div class="d-flex">
                <a href="javascript:;" class="setPic">设为主图8</a>
                <a href="javascript:;" class="delPic ml-auto ">删除</a>
            </div>
        </div>
    </div>
</div>

 

<script>
$(document).ready(function () {

$(document).on("click", ".setPic",function (e) {
                $(this).parents(".img-main").insertBefore($('#pictureList .row .img-main:first-child'))
            })

            $(document).on("click",".delPic",function (e) {
                $(this).parents(".img-main").remove();
            })


            // 正在拖动的元素
            var $srcImgDiv = null;
            var startX = null;
            var startY = null;

            // 开始拖动
            $(document).on("dragstart", ".img-main", function (event) {
                $srcImgDiv = $(this);
               
                startX = event.pageX; //获取鼠标初始位置
                startY = event.pageY;
            });

            // 拖动到.drop-left,.drop-right上方时触发的事件,拖动的元素只能放置在绑定dragover的元素的位置
            $(document).on("dragover", ".img-main", function (event) {

                // 必须通过event.preventDefault()来设置允许拖放
                event.preventDefault();
            });

            // 结束拖动放开鼠标的事件，根据放置位置找到相对节点
            $(document).on("drop", ".img-main", function (event) {
                event.preventDefault();
                var currentX = event.pageX;//向左x越小，左上角为参考点
                var currentY = event.pageY;//向下y越大
                var eHeight = $srcImgDiv.height();

                if ($srcImgDiv != $(this)) {
                   
                    if (currentX < startX)//往左边
                    {
                        if (startY >= currentY - eHeight)
                            $(this).before($srcImgDiv);//左边平移(向下平移不超过移动元素高度的也是平移)，左上
                        else
                            $(this).after($srcImgDiv);//左下
                    }
                    else if (currentX > startX)//往右边
                    {
                        if (startY - currentY > eHeight)//右上,不包括平移
                        {
                            $(this).before($srcImgDiv);
                        }
                        else {
                            $(this).after($srcImgDiv);//右下
                        }
                    }
                }
            });
        });

    </script>

<style type="text/css">
        #pictureList .row .img-main:first-child .setPic {
            display: none
        }

        #pictureList .row .img-main:first-child .main-pic-text {
            display: inline !important;
        }

        .img-div {
            width: 7.5rem;
            height: 7.5rem;
        }
    </style>