SOURCE

const ls = document.getElementsByClassName('grid-item');
const container = document.querySelector('#grid-container');
console.log(ls.length);
Array.from(ls).map((ele) => {
    ele.addEventListener('mousedown', function (event) {
        isDragging = true;
        // 创建元素的复制
        cloneElement = ele.cloneNode(true);
        cloneElement.classList.add('draggable-element');
        document.body.appendChild(cloneElement);
        // 初始位置为鼠标点击的位置
        updatePosition(event);
        // 隐藏原始元素
        ele.style.visibility = 'hidden';
        // 监听鼠标移动事件
        document.addEventListener('mousemove', handleMouseMove);

        // 监听鼠标松开事件
        document.addEventListener('mouseup', handleMouseUp);
    });

    function handleMouseUp(e) {
        isDragging = false;
        // 移除复制元素
        if (cloneElement) {
            cloneElement.remove();
        }
        // 显示原始元素
        ele.style.visibility = 'visible';
        // 如果在 dropzone 区域内，则触发相关操作
        const rectDropzone = container.getBoundingClientRect();
        if (
          event.clientX >= rectDropzone.left &&
          event.clientX <= rectDropzone.right &&
          event.clientY >= rectDropzone.top &&
          event.clientY <= rectDropzone.bottom
        ) {
            
        }
        // 移除事件监听器
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
    }

    function handleMouseMove(event) {
        if (isDragging && cloneElement) {
            // 使用 requestAnimationFrame 来更新位置
            requestAnimationFrame(() => updatePosition(event));
        }
    }
    function updatePosition(event) {
        if (isDragging && cloneElement) {
            // 更新复制元素的位置
            cloneElement.style.left = event.clientX - cloneElement.clientWidth / 2 + 'px';
            cloneElement.style.top = event.clientY - cloneElement.clientHeight / 2 + 'px';
        }
    }
});

  <div id="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
    <div class="grid-item">Item 9</div>
    <div class="grid-item">Item 10</div>
    <div class="grid-item">Item 11</div>
    <div class="grid-item">Item 12</div>
    <div class="grid-item">Item 13</div>
    <div class="grid-item">Item 14</div>
    <div class="grid-item">Item 15</div>
    <div class="grid-item">Item 16</div>
    <div class="grid-item">Item 17</div>
    <div class="grid-item">Item 18</div>
    <div class="grid-item">Item 19</div>
    <!-- 添加更多的网格项 -->
  </div>

#grid-container {
    display: grid;
    grid-template-columns: repeat(8, 50px); /* 3 列网格，可以根据需要调整 */
    grid-template-rows: repeat(4, 50px); /* 3 行网格，高度为 100px，可以根据需要调整 */
    gap: 10px; /* 网格项之间的间距 */
    width: fit-content; /* 网格容器宽度，可以根据需要调整 */
    margin: auto;
    border: 1px solid #ccc; /* 网格容器边框 */
}

.drag-item {
    opacity: 0 !important;
}

.grid-item {
    transition: all 0.01s;
    opacity: 1;
    background-color: #3498db;
    width: 30px;
    height: 30px;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #fff; /* 网格项边框 */
}

.draggable-element {
    position: absolute;
}