@andrei_pro

Move объекта по траектории?

Всем привет.

Задача такая: есть блок на странице к кружок возле него, нужно реализовать перетаскивание кружка только вокруг блока, то есть он ездит ровно по бордеру + 5px.

5ccb37457cefc958449437.png

Собственно:
1. Добавил события:
document.documentElement.addEventListener('mousemove', this.handleMove, true)
            document.documentElement.addEventListener('mousedown', this.deselect, true)
            document.documentElement.addEventListener('mouseup', this.handleUp, true)


2. Методы
deselect(e) {
                const target = e.target || e.srcElement

                if (target.tagName === 'circle') {
                    this.dragging = true
                }
            },
            handleMove(e) {
                e.stopPropagation()
                e.preventDefault()

                const isTouchMove = e.type.indexOf('touchmove') !== -1
                var mouseX = isTouchMove
                    ? e.touches[0].clientX
                    : e.clientX
                var mouseY = isTouchMove
                    ? e.touches[0].clientY
                    : e.clientY

                if (this.dragging) {
                    this.cords1.x = mouseX
                    this.cords1.y = mouseY
                }
            },
            handleUp(e) {
                this.dragging = false
            }


<circle :cx="cords1.x"
            :cy="cords1.y"
            r="4"
            stroke="red"
            fill="red"></circle>


На этом у меня при нажатии на круг он перетаскивается по странице.
Дальше сделать условия на движение по траектории путем многих экспериментов безуспешно.
  • Вопрос задан
  • 106 просмотров
Решения вопроса 2
Stalker_RED
@Stalker_RED
Рисуем фигуру, находим ее центр.
При перетаскивании проводим прямую между координатами мыши и центром фигуры (отрисовывать ее не обязательно).
В точку пересечения этой прямой и фигуры помещаем кружок.
Ну и сдвинуть его на 5px по этой-же прямой.
Ответ написан
Сделать ограничение по getBoundingClientRect()

const clamp = (min, v, max) => Math.min(max, Math.max(min, v));

let bbox = yourBlock.getBoundingClientRect();
let x = clamp(bbox.left, e.clientX, bbox.right)
let y = clamp(bbox.top, e.clientY, bbox.bottom)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы