拖拽看板卡片到其他列时，位置总是偏移怎么办？

宝玲 ☘︎ 提问于 2026-01-26 13:28:28 阅读 43

交互

我在实现看板卡片拖拽时遇到个怪问题，当把卡片拖到不同宽度的列时，它的垂直位置会突然跳动，看起来特别不连贯。

我试过在dragover事件里用客户端坐标计算top值，但不同列宽度导致定位不准。比如左边列有侧边距，右边列没有，拖过去时卡片会贴到左边框。代码大概这样写的：


let dropY = e.clientY - board.offsetTop;
cards.forEach(card => {
  const cardTop = card.offsetTop;
  if(dropY < cardTop + 20) { 
    target.appendChild(draggingCard, card);
    break;
  }
});

后来我把board.offsetTop改成了e.target.getBoundingClientRect().top，结果卡片直接飞到页面顶部去了。是不是要考虑列容器的padding或者border-box？

功能实现拖拽功能拖拽看板

我来解答赞 2 收藏

反馈

1 条解答

子墨 ☘︎ Lv1

问题出在没考虑列容器的偏移和边界。用 getBoundingClientRect() 是对的，但要算上父容器的位置。试试这个：

const boardRect = e.target.getBoundingClientRect();

let dropY = e.clientY - boardRect.top;

cards.forEach(card => {

  const cardRect = card.getBoundingClientRect();

  const cardTop = cardRect.top - boardRect.top;

  if (dropY < cardTop + cardRect.height / 2) { 

    target.appendChild(draggingCard, card);

    break;

  }

});

这样就解决了不同列宽度带来的偏移问题。记得检查下是否有额外的 margin 或 padding 影响位置。

2026-01-29 03:14