Javascript检测悬停是在元素的底部还是顶部填充

Question

我知道这听起来像是一个奇怪的问题，但我在列表中有一些元素具有以下 HTML:

<div class="list-cards">
    <div class="list-item">
        <a class="list-card" draggable="true">item</a>
    </div>
    <div class="list-item">
        <a class="list-card" draggable="true">item</a>
    </div>
    <div class="list-item">
        <a class="list-card" draggable="true">item</a>
    </div>
</div>

CSS:

.list-item {
  padding: 4px 0px;
}

.list-cards = 我的列表
.list-item = 1 个列表项
.list-card = 只是元素的样式和文本(对于这个问题不重要)

现在我想检测悬停时是悬停在列表项 div 的填充顶部还是填充底部。
(也许有办法获取我的元素的完整高度，然后使用某种鼠标坐标来了解我的“高度”(=鼠标位置)？如果有那么我不知道该怎么做这个

背景故事:
我正在制作某种拖放待办事项列表作为一个元素。我可以在 x 个列表之间拖动我的元素，但我总是只将元素附加到列表的底部。
现在我想使用我的列表元素的填充来检查我是在上面还是下面元素
如果我知道我可以根据我释放鼠标按钮的位置添加我在元素上方或下方拖动的元素

我更喜欢使用 vanilla javascript 的解决方案，但如果需要 jQuery，那也很好。我不想接触的其他框架/库

再次感谢您

Answer 1

您可以执行以下操作，根据需要调整您的代码

它获取目标元素的偏移量并将其与事件的位置进行比较。如果事件位于目标元素的上半部分，则它记录在上方，否则在下方。

$('.list-item').hover(function(e) {
  var offset = $(this).offset().top;
  var this_height = $(this).height();
  var Y = e.pageY;
  var loc = Math.abs(offset - Y);
  if (loc < this_height/2) {
    console.log('above');
  }
  else {
    console.log('below');
  }

})