JavaScript：将DIV定位在文本选择上方？

Posted 2023-03-31

【中文标题】JavaScript：将DIV定位在文本选择上方？

【英文标题】：JavaScript: Position DIV Centered Above Text Selection?

【发布时间】：2019-04-27 01:29:41

【问题描述】：

我正在尝试将<div> 放置在用户文本选择上方，该文本选择将充当类似于 Mediums 的工具栏。

虽然我已成功将 <div> 定位在所选内容旁边，但我似乎无法使其相对于所选内容正确居中：

    $(function() 
      // Setup the Event Listener
      $('.article').on('mouseup', function() 
        // Selection Related Variables
        let selection = window.getSelection(),
        getRange      = selection.getRangeAt(0),
        selectionRect = getRange.getBoundingClientRect();

        // Set the Toolbar Position
        $('.toolbar').css(
          top: selectionRect.top - 42 + 'px',
          left: selectionRect.left + 'px'
        );
      );
    );

我可以通过从视口中减去选择的左偏移量来确定选择的中心点，如下所示：

 selectionRect.left - selectionRect.width

但是，我不确定如何使用它来将工具栏的位置设置为相对于选择矩形居中？

我尝试从选择的宽度除以 2 中减去工具栏的左偏移量，但这也不能完全与中心对齐。

JSFiddle

https://jsfiddle.net/e64jLd0o/

【参考方案1】：

一种解决方案是将以下内容添加到您的 CSS：

.toolbar 
  transform: translateX(-50%);

并更新您的脚本以偏移工具栏元素的左侧位置，如下所示：

$('.toolbar').css(
  top: selectionRect.top - 42 + 'px',
  left: ( selectionRect.left + (selectionRect.width * 0.5)) + 'px'
);

这是一个有效的 sn-p：

$(function() 
  // Setup the Event Listener
  $('.article').on('mouseup', function() 
    // Selection Related Variables
    let selection = window.getSelection(),
    getRange      = selection.getRangeAt(0),
    selectionRect = getRange.getBoundingClientRect();
     

    // Set the Toolbar Position
    $('.toolbar').css(
      top: selectionRect.top - 42 + 'px',
      left: ( selectionRect.left + (selectionRect.width * 0.5)) + 'px'
    );
  );
);

.article 
  position: relative;
  height: 300px;
  padding: 20px;


.toolbar 
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 169px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: black;
  text-align: center;
  color: white;
  border-radius: 8px;
  
  transform: translateX(-50%);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Editor -->
<div class="article">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur dignissimos facilis id repellat sint deserunt voluptates animi eaque tempore debitis, perferendis repudiandae voluptatem. Eligendi fuga deleniti saepe quod eum voluptas.</p>
</div>

<!-- Toolbar -->
<div class="toolbar">Toolbar</div>

【参考方案2】：

为了快速编辑，我应用了正确定位 div 所需的更改：

https://jsfiddle.net/yaLvzswu/

我在left 计算中应用了一些额外的定位数学：

$(function() 
  // Setup the Event Listener
  $('.article').on('mouseup', function() 
    // Selection Related Variables
    let selection = window.getSelection(),
    getRange      = selection.getRangeAt(0),
    selectionRect = getRange.getBoundingClientRect();
        console.log(selectionRect)
    // Set the Toolbar Position
    $('.toolbar').css(
      top: selectionRect.top - 42 + 'px',
      left: (selectionRect.left - ($('.toolbar').width()/2) + (selectionRect.width/2))+ 'px'
    );
  );
);

您的版本将工具栏的左侧应用于所选文本的左侧。由于我们想将工具栏的 center 放在所选内容的 center 上，因此左侧会随机移动两次：

从左开始 向左移动工具栏宽度的一半

现在工具栏中心在选择的左边。

添加一半的选择宽度

工具栏向右移动一点 - 所选文本的中心。