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 的填充顶部还是填充底部。
（也许有一种方法可以获取我的项目的全高，然后使用某种鼠标坐标来了解我的 'height'（=鼠标位置）？如果有的话我就不知道了怎么做

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

我更喜欢使用 vanilla javascript 的解决方案，但如果需要 jQuery，那也很好。其他frameworks/libraries不想碰

再次感谢您

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');
  }

})

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

Javascript detect if hover is on bottom or top padding of element

html

javascript

css

jquery

drag-and-drop