拖拽图片切换顺序

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"> 设为主图2a>
                <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 ">设为主图4a>
                <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">设为主图41a>
                <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">设为主图1a>
                <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">设为主图2a>
                <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">设为主图3a>
                <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">设为主图4a>
                <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">设为主图5a>
                <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">设为主图6a>
                <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">设为主图7a>
                <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">设为主图8a>
                <a href="javascript:;" class="delPic ml-auto ">删除a>
            div>
        div>
    div>
div>