Implement Slidebar with drag and drop?

Question

css

I'm a beginner front-end developer and I need help implementing what's in the picture. I have no idea how to do it. It is necessary that the slidebar has 24 hours, it has a route div, as in the picture. But most importantly, it must be dragged along the Y axis with the mouse. you can drag from one slidebar to the second, but without shifting along the X axis. How to implement this? Maybe it's already done and I can't find it. In general, help me, I've been suffering for a week now. Thank you.

Answer 1

I'm suffering for a week.

Drop your work. Nobody will do it for you.
What are the problems? Make the variable "drag", which is false by default. On mousedown make it true, on mouseup back false. On mousemove you do a check, if "drag" is true, then calculate the X coordinate of the mouse, and move the block to that coordinate. You can also calculate the mouse coordinate relative to the moving block, so that you can grab at any place.
For drag and drop, learn drag&drop events.