鼠标位置粘贴区块失效：每次粘贴至(0,0)位置的问题排查

核心问题定位 #

1. correctPosition调用错误：该函数放在循环外部，且引用的block是循环最后一个元素，导致只有最后一个克隆区块可能被修正位置，其他区块位置未处理。
2. 坐标系统不匹配：e.pageX/Y是相对于文档的绝对坐标，如果newDraggable将元素插入到带position: relative的容器中，直接使用文档坐标会导致定位偏移，甚至落到(0,0)。
3. 克隆元素残留样式：原元素的top/left内联样式被克隆后，可能覆盖你设置的新位置参数。

具体修复步骤 #

1. 修正correctPosition调用位置

将correctPosition放到循环内部，传入当前克隆的区块：

if ((e.ctrlKey || e.metaKey) && e.keyCode == vKey) {
  for (const block of copyblockTypes) {
      const clonedBlock = $('#' + block).parent().clone();
      newDraggable(
          clonedBlock,
          { top: e.pageY + 'px', left: e.pageX + 'px' }, 
          true,
          0
      );
      correctPosition(clonedBlock); // 传入当前克隆的区块
  }
}

2. 适配容器相对坐标

如果克隆的区块是插入到某个相对定位的容器中，需要将文档坐标转换为容器相对坐标：

// 替换为实际的容器选择器
const targetContainer = $('#draggable-container');
const containerOffset = targetContainer.offset();

if ((e.ctrlKey || e.metaKey) && e.keyCode == vKey) {
  for (const block of copyblockTypes) {
      const clonedBlock = $('#' + block).parent().clone().css({ top: '', left: '' }); // 清除原定位样式
      // 计算相对于容器的坐标
      const relativeTop = e.pageY - containerOffset.top;
      const relativeLeft = e.pageX - containerOffset.left;
      
      newDraggable(
          clonedBlock,
          { top: relativeTop + 'px', left: relativeLeft + 'px' }, 
          true,
          0
      );
      correctPosition(clonedBlock);
  }
}

3. 简化Ctrl键判断逻辑

去掉ctrlDown变量，直接用事件对象的ctrlKey/metaKey判断，避免状态维护错误：

$(document).keydown(function(e){ 
  // 复制逻辑
  if ((e.ctrlKey || e.metaKey) && e.keyCode == cKey) { 
    copyblockTypes = selectedList.map(block => block.blockType);
  };
  // 粘贴逻辑
  if ((e.ctrlKey || e.metaKey) && e.keyCode == vKey) {
    // 上述修复后的粘贴代码
  }
}).keyup(function(e){
  // 无需再维护ctrlDown状态
});

4. 排查newDraggable内部逻辑

如果上述修改后仍有问题，检查newDraggable是否：

• 对传入的位置参数做了强制重置（比如默认设为0,0）
• 有网格对齐、边界限制等逻辑覆盖了传入的坐标
• 元素插入的父容器是否正确

内容的提问来源于stack exchange，提问作者VictorMC