Javascript 检测鼠标是否位于元素的上半部分或下半部分

我有javascript/jquery代码，允许用户拖放记录以重新排序。但目前它总是将项目排序在他们移动到的任何项目之上

如果鼠标在上半部分，我希望它在上面排序，如果鼠标在下半部分，它在下面排序。我想显示一条线或边框，指示根据鼠标当前所在的位置将其排序到哪一侧

这个过程中我唯一不确定的部分是如何判断鼠标是在元素的上半部分还是下半部分。我想我需要做一些数学运算，将高度除以2，然后查看元素中鼠标的相对y坐标是否高于或低于该数字

---

在我写这篇文章的时候，我想也许标题应该具体地反映出我想知道如何获得元素中鼠标的相对坐标，但我也知道当我太具体时，我最终不得不解释更大的图景，因为通常有更好的替代解决方案。因此，这里有一个大画面和我认为我需要解决问题的具体方法。

您没有指定是否正在使用界面，但假设您正在使用，您可以使用drop event对象获得鼠标（或触摸）偏移位置，并将其与目标元素的高度进行比较。如果偏移量超过目标高度的一半，请将记录附加到目标元素之后，如果没有，请将记录附加到上一个同级元素之后

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var target = ev.currentTarget;
  var domRect = target.getBoundingClientRect();
  console.log("offsetY: " + ev.offsetY + " height: " + domRect.height);
  // do the logic and append your record to the right position
}

---

如果您不使用HTML拖放界面，那么仍然可以将事件偏移量与拖放目标进行比较。

创建一个（不可见的）如何定义你想要的阻力区域的叠加？@Allan Wind我确实考虑过，但我认为用y偏移除以2会更简单，正如Rich指出的那样。我想我应该知道拖放界面上存在这样一个属性，但我以前没有意识到。