如何去掉拖动时的重影

Question

这段代码当鼠标按下拖动的时候有重影，但是在拖动的过程中把鼠标松开也能正常拖动，反而没有重影了，为什么？再就是怎样才能把鼠标按下拖动时的重影去掉，请修改代码

<div draggable=“true” id=“draggable”>拖动我</div> function dragForm(){
var draggableElement = document.querySelector(‘.addNewSubjects’)
var isDragging = false;
var startX, startY;
draggableElement.addEventListener(‘mousedown’, function (e) {
isDragging = true;
startX = e.clientX - parseInt(draggableElement.style.left || 0);
startY = e.clientY - parseInt(draggableElement.style.top || 0);
draggableElement.style.position = ‘absolute’;
});
document.addEventListener(‘mousemove’, function (e) {
if (isDragging) {
draggableElement.style.left = (e.clientX - startX) + ‘px’;
draggableElement.style.top = (e.clientY - startY) + ‘px’;
}
});
document.addEventListener(‘mouseup’, function () {
isDragging = false;
});
}
dragForm()
 
 

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

你的代码中出现的重影问题可能是由于在鼠标按下和鼠标移动事件处理过程中，元素的位置更新存在延迟导致的。当鼠标按下时，元素开始拖动，但由于某些原因（可能是浏览器的渲染机制或其他因素），在拖动开始时可能会出现一个额外的、过时的元素副本，造成重影。这个问题在很多情况下是与浏览器的渲染机制和GPU的处理速度有关的。尽管具体的原因可能因浏览器而异，但可以通过以下方法来尝试解决或改善这个问题：

解决方法：

1. 使用transform属性进行位置变换： 使用CSS的transform属性进行位置变换可以减少重影现象，因为它可以更平滑地进行动画和位置变换。将代码中的位置设置换成使用transform属性的代码：

   draggableElement.addEventListener('mousedown', function (e) {
       isDragging = true;
       // 保存起始位置相对于元素的偏移量
       startX = e.clientX - draggableElement.getBoundingClientRect().left;
       startY = e.clientY - draggableElement.getBoundingClientRect().top;
   
       // 设置初始transform属性以消除任何潜在的旧样式影响
       draggableElement.style.transformOrigin = '0 0'; // 重置原点到左上角，确保拖动时不会产生倾斜效果
   });
   
   document.addEventListener('mousemove', function (e) {
       if (isDragging) {
           // 使用transform属性进行位置变换，而非直接设置left和top属性
           draggableElement.style.transform = `translate(${e.clientX - startX}px, ${e.clientY - startY}px)`;
       }
   });
   

   这样做可以确保拖动更加平滑且不会有重影。这通常能够改善因为直接设置位置导致的渲染问题。请注意在使用transform之前重置样式或确保其不会有不预期的影响。

2. 优化事件处理逻辑： 确保事件处理逻辑正确无误，避免不必要的重绘或更新。例如，确保只有在确实需要更新元素位置时才触发mousemove事件的处理函数。如果鼠标按下时没有触发mousemove事件处理器（比如鼠标快速抬起），可能会导致旧的元素状态与新的状态冲突。你可以添加一些逻辑来确保只有在鼠标按下并且持续移动时才更新位置。这可以通过检查mousedown和mousemove事件之间的时间差来实现。

3. 浏览器兼容性测试： 由于不同的浏览器可能会有不同的渲染机制，因此建议在不同的浏览器上测试你的代码以查看是否存在特定的浏览器问题。某些浏览器可能需要特定的优化或调整才能正常工作。此外，确保你的代码运行在最新版本的浏览器中，因为它们可能具有更优化的渲染性能。对于旧的浏览器版本可能需要使用特定的库或技巧来减少重影问题。有时候浏览器厂商也会提供针对特定问题的修复工具或插件。请确保测试在不同环境中的表现。这些方法可能有助于减少或消除重影问题。记得调试和测试代码以确认改善效果，并随时优化调整以确保最佳的拖动体验。