拖动后如何检测'轻弹'？

<div id="container" ondrag="handleDrag(event)" style="width: 100px; height: 100px;">
  <!-- container content here -->
</div>

function handleDrag(event) {
  const target = event.target;
  const initialPosition = {
    left: target.getBoundingClientRect().left,
    top: target.getBoundingClientRect().top,
  };

  // 修改元素的left和top属性，模拟拖动过程
  target.style.left = `${initialPosition.left + event.clientX - initialPosition.left}px`;
  target.style.top = `${initialPosition.top + event.clientY - initialPosition.top}px`;
}

window.addEventListener('resize', handleResize);
window.addEventListener('scroll', handleScroll);

function handleResize() {
  // 判断标签位置是否发生变化
  const targetPosition = getPositionOfElement(target);
  if (targetPosition.left !== initialPosition.left || targetPosition.top !== initialPosition.top) {
    console.log('轻弹事件：标签位置发生变化');
  }
}

function handleScroll() {
  // 判断标签位置是否发生变化
  const targetPosition = getPositionOfElement(target);
  if (targetPosition.left !== initialPosition.left || targetPosition.top !== initialPosition.top) {
    console.log('轻弹事件：标签位置发生变化');
  }
}

function getPositionOfElement(element) {
  const rect = element.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY,
  };
}