直接上代码和效果图

未拖拽前

拖拽后

html

<div class="img">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="1" src="./img/1.jpeg">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="2"
            src="./img/14C926C3-2B43-4DED-8F26-F4F118BA1909_1_105_c.jpeg">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="3"
            src="./img/550FC0A4-1A7D-4178-A4BE-6ED625A78D3D_1_102_o.jpeg">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="4"
            src="./img/5E8ADC34-CF38-4DA2-898B-F1C6675C6AC9_1_105_c.jpeg">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="5"
            src="./img/WeChatea82f5996f908af0d1116e03ad7b9282.png">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="6"
            src="./img/D233E37E-0A96-4595-B593-F20EA7ECCE06_1_105_c.jpeg">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="7"
            src="./img/6B75BB6E-6BF2-4BD4-8ED7-478003A08224_1_105_c.jpeg">
        <img class="drag1" draggable="true" ondragstart="dragStart(event)" draggable="true" id="8"
            src="./img/771F6F93-6ADF-41AB-8B6A-7E14233D1AFA_1_105_c.jpeg">

    </div>
    <div class="drop_box">
        <div class="drop_box_fater">
            <div class="heart-item" style="margin-left: 92px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" style="margin-left: 182px;" ondrop="drop(event)" ondragover="allowDrop(event)">
            </div>
        </div>
        <div class="drop_box_fater">
            <div class="heart-item" style="margin-left: 30px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" style="margin-left: 60px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="drop_box_fater">
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="drop_box_fater">
            <div class="heart-item" style="margin-left: 60px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="drop_box_fater">
            <div class="heart-item" style="margin-left: 90px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="drop_box_fater">
            <div class="heart-item" style="margin-left: 150px;" ondrop="drop(event)" ondragover="allowDrop(event)">
            </div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div class="heart-item" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="drop_box_fater">
            <div class="heart-item" style="margin-left: 210px;" ondrop="drop(event)" ondragover="allowDrop(event)">
            </div>
        </div>
    </div>

可以直接遍历一下

js

    <script>
        function dragStart(event) {
            event.dataTransfer.setData("didi", event.target.id);
        }
        function allowDrop(event) {
            event.preventDefault();
        }
        function drop(event) {
            console.log(event.target.id, '12112');
            event.preventDefault();
            if (event.target.id == '') {
                var data = event.dataTransfer.getData("didi");
                event.target.appendChild(document.getElementById(data));
            }

        }
    </script>

css

  <style>
        .drag1 {
            width: 60px;
            height: 60px;
        }

        .heart-item {
            width: 60px;
            height: 60px;
            background-color: skyblue;
            border: 1px solid #fff;
        }

        .drop_box_fater {
            display: flex;
        }
    </style>