JavaScript: положение DIV по центру над выделением текста? - PullRequest
Новая
       35

JavaScript: положение DIV по центру над выделением текста?

3 голосов
/ 27 апреля 2019

Я пытаюсь расположить <div> над выделенным пользователем текстом, который будет действовать как панель инструментов, аналогичная средам.

enter image description here

Пока яуспешно получили <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/

Ответы [ 2 ]

5 голосов
/ 27 апреля 2019

Одним из решений было бы добавить следующее в ваш CSS: 

.toolbar {
  transform: translateX(-50%);
}

и обновите ваш скрипт, чтобы сместить левую позицию элемента панели инструментов следующим образом: 

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

Вот рабочий фрагмент: 

$(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>
3 голосов
/ 27 апреля 2019

Для быстрого редактирования я применил изменения, необходимые для правильного позиционирования 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'
    });
  });
});

Ваша версия применяется слева от панели инструментов слева от выделенного текста. Поскольку мы хотим поместить центр вашей панели инструментов в центр выделения, левый тасуется дважды:

  • начало слева
  • переместиться влево на половину ширины панели инструментов

Теперь центр панели инструментов находится слева от выделения.

  • добавить половину ширины выделения

Панель инструментов немного сдвигается вправо - центр выделенного текста.

...