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

Question

[andrei_pro]

Всем привет.

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



Собственно:
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>

На этом у меня при нажатии на круг он перетаскивается по странице.
Дальше сделать условия на движение по траектории путем многих экспериментов безуспешно.

Answer 1

[Stalker_RED]

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

Answer 2

[Vitaliy]

Сделать ограничение по 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)

Comments

[andrei_pro]

Шикарно, только кружок ездит и внутри блока.

[Vitaliy]

andrei_pro, ну это уже сами корректируйте, я не учитывал отступ