javascript提问

Question

请问各位：我这段代码执行后为什么只是视觉上看起来移动了，实际我拖动一下又会变回原来的样子？

代码运行后的视频
执行后的效果

我一动每一行中的任意一张，就会到后面，只有我移动的那张才有效果

```javascript
(function() {
    'use strict';

    // 辅助函数：等待元素加载
    function waitForElement(selector, timeout = 5000) {
        return new Promise((resolve, reject) => {
            const check = () => {
                const element = document.querySelector(selector);
                element ? resolve(element) : setTimeout(check, 100);
            };
            setTimeout(() => reject(new Error(`元素 "${selector}" 加载超时`)), timeout);
            check();
        });
    }

    // 配置：根据页面结构设置选择器
    const CONFIG = {
        ROWS_SELECTOR: 'tr.row-hover', // 行的选择器
        IMAGE_ITEMS_SELECTOR: '.single-image' // 图片容器选择器
    };

    // 核心功能：将每行最后一张图片移到最前面
    async function moveLastImageToFront() {
        try {
            // 等待行元素加载
            await waitForElement(CONFIG.ROWS_SELECTOR);
            const rows = document.querySelectorAll(CONFIG.ROWS_SELECTOR);

            rows.forEach((row, rowIndex) => {
                // 找到当前行的所有图片容器
                const imageItems = row.querySelectorAll(CONFIG.IMAGE_ITEMS_SELECTOR);
                if (imageItems.length < 2) {
                    console.log(`第 ${rowIndex + 1} 行：图片数量不足 2 张，跳过移动`);
                    return;
                }

                // 获取最后一张和第一张图片容器
                const lastImage = imageItems[imageItems.length - 1];
                const firstImage = imageItems[0];
                
                // 获取第一张图片的父节点（这是正确的插入位置）
                const parent = firstImage.parentNode;
                
                // 移动 DOM 节点，确保在正确的父节点上执行插入
                parent.insertBefore(lastImage, firstImage);
                console.log(`第 ${rowIndex + 1} 行：最后一张图片已移到最前`);
            });

            console.log(`✅ 共处理 ${rows.length} 行图片顺序调整，操作完成！`);
        } catch (error) {
            console.error("移动图片失败:", error);
        }
    }

    // 启动确认：提示并执行
    if (confirm('确定要执行「将每行最后一张图片移到最前面」操作吗？')) {
        moveLastImageToFront();
    }
})();

```

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解答

你的问题是关于 JavaScript 中的一个问题，关于 DOM 元素的移动和拖动。

从你的描述中，我可以看到，你想要实现的是，当用户拖动某个元素时，该元素会被移动到新的位置。但是，你发现了一个问题，即当你拖动元素后，元素会自动返回到原来的位置。

这个问题的原因可能是因为你没有正确地处理元素的拖动事件。JavaScript 中有多种方式可以实现元素的拖动，例如使用 onmousedown、onmousemove 和 onmouseup 事件来实现。

以下是一个简单的示例代码，演示如何使用 JavaScript 实现元素的拖动：

// 获取要拖动的元素
var elem = document.getElementById('myElement');

// 添加事件监听器
elem.addEventListener('mousedown', function(event) {
  // 记录起始位置
  var startX = event.clientX;
  var startY = event.clientY;
  // 记录当前位置
  var currX = startX;
  var currY = startY;
  // 添加mousemove事件监听器
  document.addEventListener('mousemove', function(event) {
    // 计算新的位置
    currX = event.clientX;
    currY = event.clientY;
    // 更新元素的位置
    elem.style.left = currX + 'px';
    elem.style.top = currY + 'px';
  });
  // 添加mouseup事件监听器
  document.addEventListener('mouseup', function() {
    // 移除mousemove事件监听器
    document.removeEventListener('mousemove', null, false);
  });
});

在上面的代码中，我们首先获取要拖动的元素，然后添加 mousedown 事件监听器来记录起始位置。然后，我们添加 mousemove 事件监听器来更新元素的位置，并添加 mouseup 事件监听器来移除 mousemove 事件监听器。

这个示例代码可以帮助你实现元素的拖动，但是你需要根据你的实际需求进行修改和调整。

如果你需要更多帮助，请提供更多的代码和详细的描述，我将尽力帮助你解决问题。