Привязать элемент рядом с курсором

Question

Я хотел бы создать веб-интерфейс, в котором стрелка или какой-нибудь маркер места (треугольник в моём макете ниже) скачкообразно скачет с приращением, следуя за курсором пользователя. Это будет только для настольных компьютеров, поэтому мобильность не имеет значения.

Цель состоит в том, чтобы маркер привязывался к «точкам вставки», где пользователь затем может щелкнуть, чтобы добавить новый элемент в некоторый список элементов. Думайте об этом как инструмент для создания веб-контента. Маркер показывает, где можно добавить элемент (между другими элементами).

Проблема в том, что при поиске в сети ничего подобного не было. Я действительно не знаю, как это назвать, за исключением, может быть, эффекта «зависания» или «ползунка с надрезом».

Макет:

Маркер должен взаимодействовать только с курсором в пределах определенной близости (например, 50 пикселей), поэтому маркер будет двигаться только тогда, когда это является намерением пользователя. Он должен оставаться заблокированным на месте, пока добавляется новый элемент, пока пользователь не выберет «ОК» или «Отмена». Однако это детали - главное, я не знаю, как кодировать эффект привязки, основываясь на позиции курсора.

Я открыт как для jQuery, так и для vanilla js.

Answer 1

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

function chooseNearest(items, cursorPosition) {
  const { y } = cursorPosition;

  return items
    .map(
      ({ top, height }) => top + height / 2
    ).reduce(
      ({ distance, itemIndex }, center, index) => {
        const newDistance = Math.abs(y - center);

        return newDistance < distance
          ? { distance: newDistance, itemIndex: index }
          : { distance, itemIndex };
      }, ({ distance: Infinity })
    )
}