Could you tell me how to realize the leader between the two boxes?

clipboard.png
how do you realize the leader of this correspondence in the figure? there may be several boxes on the right, and how to dynamically establish a leader connection with the box on the left? Please understand the boss to give an idea and method of implementation

May.22,2021

:: after:: before


  1. calculate the center point of two boxes
  2. draw a
    with pseudo elements, and use one of its borders as a connection
  3. use trigonometric function to calculate the position of the box, put it in the past

well, my method is a bit stupid, that is, put the line and block in a container, calculate their left mark in the container, and then connect the line. C can be dragged and dragged, and the line can be followed on the right, but dragging is not easy to use.
the general idea is as follows:

  

does it involve adaptation? if it involves adaptation, it is recommended to put three boxes in one container. If adaptation is not involved, there are many ways. Only the position is determined, and the lines between them can be simulated with boxes, pictures, etc.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb45b9-4f99c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb45b9-4f99c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?