How to move an element relative to the mouse when clicked?

Question

css

Good afternoon!
I want the block to move relative to the parent element.
I have an outer block, as it were, limited to 500 pixels, and an inner one 3000 pixels wide.
So, if the black square goes beyond the visible initial boundaries, then it starts to behave strangely.
So here is my whole code