How to change the lines between two points from curved to straight lines with one angle point

Question

What i need

Current example : http://jsfiddle.net/2ecsjomz/5/

Notes:

• a specific left/right pair will never change places, "left drag" will always stay on the left or the "right drag"
• a single angle point needs to be formed between two points
• the line starting from the "left drag" needs to be horizontal
• if it helps i do not need the points to be draggable, its ok to have specific coordinates.
• it needs to generate lines between two html elements ( same as example )

Answer 1

Change the path coding to this one below:

        // Build the path decription
        p = "M" + pt1x + "," + pt1y +
            " L" + (pt1x+pt2x)/2 + "," + pt1y +
            " L" + pt2x + "," + pt2y ;