Move an object along a path?

Question

JavaScript

Hello.
The task is this: there is a block on the page with a circle next to it, you need to implement dragging the circle only around the block, that is, it travels exactly along the border + 5px.

Actually:
1. Added events:

document.documentElement.addEventListener('mousemove', this.handleMove, true)
            document.documentElement.addEventListener('mousedown', this.deselect, true)
            document.documentElement.addEventListener('mouseup', this.handleUp, true)

2. Methods

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>

On this, when I click on the circle, it is dragged across the page.
Further, to make conditions for movement along the trajectory through many experiments unsuccessfully.

Answer 1

We draw a figure, we find its center.
When dragging, we draw a straight line between the mouse coordinates and the center of the shape (it is not necessary to draw it).
Place a circle at the point of intersection of this line and the figure.
Well, move it 5px along the same line.