QML中如何实现Item跟随其他被拖动Item移动

核心实现逻辑非常直接：拖动时实时计算被拖动Item的位移偏移，把偏移量同步应用到所有需要跟随的Item上，同时做好可拖动区域的边界限制即可，具体落地分4步：

• 记录拖动初始状态
  鼠标按下触发拖动的瞬间，先记录当前鼠标的初始坐标startX、startY，同时缓存所有需要跟随移动的Item的当前位置，避免拖动过程中反复读取DOM位置造成画面抖动。如果是选中部分Item成组拖动的场景，这里只缓存处于选中状态的Item位置即可。
• 实时计算拖动偏移量
  鼠标移动过程中，实时计算当前鼠标位置和初始按下位置的差值得到偏移量offsetX、offsetY。这一步要先做边界校验：如果偏移量会让被拖动Item超出预设的可拖动区域，就把偏移量钳制到边界允许的最大值，避免Item跑出规定区域。
• 批量更新所有Item位置
  把之前缓存的每个跟随Item的初始坐标，叠加钳制后的偏移量，更新到Item的定位属性上。优先用transform: translate()实现位置更新，相比修改top/left不会触发页面重排，拖动流畅度会高很多。
• 拖动结束重置状态
  鼠标松开时清空之前缓存的初始位置、偏移量等临时变量，完成一次拖动流程。

常见踩坑点：不要在mousemove回调里每次都重新获取所有Item的当前位置计算偏移，非常容易因为DOM渲染的时间差造成位置累计误差，拖久了Item会出现错位，一定要在拖动开始时一次性缓存好所有初始位置。

核心逻辑参考代码（原生JS伪代码）：

const dragContainer = document.querySelector('.drag-area')
const dragItems = document.querySelectorAll('.drag-item')
let currentDragTarget = null
let mouseStartPos = { x: 0, y: 0 }
let followItemsInitPos = []

// 绑定拖动开始事件
dragItems.forEach(item => {
  item.addEventListener('mousedown', (e) => {
    currentDragTarget = item
    mouseStartPos.x = e.clientX
    mouseStartPos.y = e.clientY
    // 缓存所有需要跟随的Item初始位置
    followItemsInitPos = Array.from(dragItems).map(el => {
      const rect = el.getBoundingClientRect()
      return { el, initX: rect.left, initY: rect.top }
    })
  })
})

// 绑定拖动移动事件
document.addEventListener('mousemove', (e) => {
  if (!currentDragTarget) return
  let offsetX = e.clientX - mouseStartPos.x
  let offsetY = e.clientY - mouseStartPos.y
  // 此处可补充边界钳制逻辑，限制offsetX、offsetY的合法范围

  followItemsInitPos.forEach(({ el, initX, initY }) => {
    const currentRect = el.getBoundingClientRect()
    el.style.transform = `translate(${initX + offsetX - currentRect.left}px, ${initY + offsetY - currentRect.top}px)`
  })
})

// 绑定拖动结束事件
document.addEventListener('mouseup', () => {
  currentDragTarget = null
  followItemsInitPos = []
})

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