Requirements

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jqSimpleConnect-1.0.js"></script>
        

Demo 1

Code

<script type="text/javascript">
    jQuery(document).ready(function() {
        // Create connections.
        var conn1 = jqSimpleConnect.connect("#div_a", "#div_b");
        var conn2 = jqSimpleConnect.connect("#div_c", "#div_d");
                    
        // Define the link's behaviours for remove the connections
        jQuery("#a_remove_conn1").click(function() {
            if(conn1 != null) {
                jqSimpleConnect.removeConnection(conn1);
                conn1 = null;
            }
        return false;
        });
                   
        jQuery("#a_remove_conn2").click(function() {
            if(conn2 != null) {
                jqSimpleConnect.removeConnection(conn2);
                conn2 = null;
            }
        return false;
        });
    });
</script>
<div style="position:relative; height: 100px;">
    <div id="div_a" style="position:absolute; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px;">Div A</div>
    <div id="div_b" style="position:absolute; top:50px; left:150px; border:1px solid black; background-color:white; padding:5px;">Div B</div>
    <div id="div_c" style="position:absolute; top:25px; left:250px; border:1px solid black; background-color:white; padding:5px;">Div C</div>
    <div id="div_d" style="position:absolute; top:25px; left:400px; border:1px solid black; background-color:white; padding:5px;">Div D</div>
</div>
<div>
    <a href="#" id="a_remove_conn1">Remove first connection</a> | 
    <a href="#" id="a_remove_conn2">Remove second connection</a>
</div>
        

Result

Demo 2

Code

<script type="text/javascript">
    jQuery(document).ready(function() {
        // Create connection.
        var conn3 = jqSimpleConnect.connect("#div_e", "#div_f");
                    
        // Each second, move 'Div E' and repaint the connection.
        var flag = true;
        setInterval(function() {
            var newPos = flag? 50 : 5;                       
            jQuery("#div_e").css('left', newPos);                            
            jqSimpleConnect.repaintConnection(conn3);
            flag = !flag;
        }, 750);
    });                
</script>
<div style="position:relative; height: 110px;">
    <div id="div_e" style="position:absolute; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px;">Div E</div>
    <div id="div_f" style="position:absolute; top:75px; left:150px; border:1px solid black; background-color:white; padding:5px;">Div F</div>
</div>
        

Result

Demo 3

Code

<script type="text/javascript">
    jQuery(document).ready(function() {
        // Create connection.
        var conn4 = jqSimpleConnect.connect("#div_g", "#div_h");
                    
        // Animate 'Div G'.
        DivG_Anim1(conn4);
        });
                
    // Define animation functions.
    function DivG_Anim1(connection) {
        jQuery('#div_g').animate(
            { top: '+=70' },
            {
                duration: 5000,
                step: function() { 
                    // Repaint connection.
                    jqSimpleConnect.repaintConnection(connection);
                },
                complete: function() {
                    // Init second animation.
                    DivG_Anim2(connection);
                    }
            }
        );
    }
    
    function DivG_Anim2(connection) {
        jQuery('#div_g').animate(
            { top: '-=70' },
            {
                duration: 5000,
                step: function() { 
                    // Repaint connection.
                    jqSimpleConnect.repaintConnection(connection);
                },
                complete: function() {
                    // Re-init first animation.
                    DivG_Anim1(connection);
                }
            }
        );
    }
</script>
<div style="position:relative; height: 110px;">
    <div id="div_g" style="position:absolute; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px;">Div G</div>
    <div id="div_h" style="position:absolute; top:75px; left:150px; border:1px solid black; background-color:white; padding:5px;">Div H</div>
</div>
        

Result