javascript - 将元素定位在另一个高度时防止重叠

Question

在一个长文本文档中有一些“特殊词”，我想在左侧显示注释/注释。每个音符都应该尽可能地与其所指的词的水平相符。

此 HTML 以表格形式组织。每个段落是一个表格行，由左侧表格列中的注释和右侧表格列中的正文组成。注释/注释在左边。然而，不幸的是，那里还有一些其他元素/文本节点。

<table>
    <tr>
        <td class"comments">
            <span id="dog" class="note">Note for dog</span>
            <span id="cat" class="note">Note for cat</span>
            <span id="horse" class="note">Note for horse</span>
            Somethin else than a note.
        </td>
        <td>[Text...]
            <span id="dog_anchor" class="reference">Dog</span>
            <span id="cat_anchor" class="reference">Cat</span>
            <span id="horse_anchor" class="reference">Horse</span>
            [Text...]
        </td>
    </tr>
</table>

更改“注释”很容易- span s 至 absolute并将它们定位在它们的引用水平上:

$('span[class*="note"]').each(function (index, value) {
    var my_id = $(this).attr('id');
    var element_ref = document.getElementById(my_id + "_anchor"); // get reference element
    var pos_of_ref = element_ref.offsetTop; // get position of reference element
    $(this).css('top', pos_of_ref); // set own position to position of reference element
});

然而，这里的生活并不那么简单。由于一行中可能有很多引用词(而另一行没有)，我需要一种相当复杂的方式来分发注释，以便它们尽可能接近它们的引用，而不会破坏布局中的任何内容(例如，放置在表格单元格之外或与其他元素重叠)。

此外，无法更改表格单元格的高度。不得移动不是注释的元素。 (注意元素总是按照它们在正文中出现的顺序排列。这不是问题所在。) 所以，我需要这样的算法:

• 在表格单元格中记下所有笔记。
• 分析该表格单元格中的空白区域:哪些区域是空白的，哪些区域被遮挡了？
• 分布表格单元格中的注释，使每个注释尽可能接近其引用词，而没有任何元素与表格单元格中的任何其他项目发生冲突。

有没有什么快速而优雅的方法可以做到这一点而无需编写数百行代码？

这是一个 JSfiddle:https://jsfiddle.net/5vLsrLa7/7/

[建议解决方案的更新]

只需将旁注的位置设置为 relative或者只是将音符向下移动是行不通的，因为在这种情况下，旁注将相对于其所需位置向下移动，这导致旁注远离其引用词。毕竟，为了一个简洁的解决方案，我需要在两个方向上展开旁注:向上和向下。

[更新] 预期的结果将是这样的:

如您所见，不可能将所有音符都放在其引用高度。但是，可用空间用于将它们放置得尽可能靠近，并上下移动它们。

Answer 1

我改变了 move() 函数如下:

function move(){
    var prev_offset = 0;
    $('span.note').each(function (index, value){ 
        var my_id = $(this).attr('id');
        var element_ref = document.getElementById(my_id + "_anchor"); // get reference element
        var pos_of_ref = element_ref.offsetTop; // get position of reference element

        if (prev_offset >= pos_of_ref){
            pos_of_ref = prev_offset + 30;
        }
        $(this).css('top', pos_of_ref); // set own position to position of reference element
        prev_offset = pos_of_ref;
    });
}