gunjankothari/jquery.connectingline

This jQuery Plugin helps to connect two elements with a line.

jquery.connectingline's Issues

Line not positioned correctly

Hi I have tried using this plugin but my lines are not positioned correctly and its not joining as expected - http://snag.gy/3Y2wq.jpg

My HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.svg.min.js"></script>
<script type="text/javascript" src="js/jquery.connectingLine.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<link href="css/tmc.css" rel="stylesheet" type="text/css" />

<div class='img_all'>

    <div class="img_logo1"><img src="images/img 1.png" alt="" /></div>

    <div class="img_logo2"><img src="images/img 2.png" alt="" /></div>

    <div class="img_logo3"><img src="images/img 3.png" alt="" /></div>

/>

<script type="text/javascript">
var mySVG = $('body').connectSVG();
mySVG.drawLine({
left_node:'.img_logo1',
right_node:'.img_logo2',
horizantal_gap:10
});

        $( ".img_logo1" ).draggable({
      drag: function(event, ui){mySVG.redrawLines();}
    });
    $( ".img_logo1" ).draggable({
      drag: function(event, ui){mySVG.redrawLines();}
    });

</script>

CSS:

body {
background: #001a33;
}

.img_all img{
width: 10%;
height: auto;
}

.img_logo1 img {
position: absolute;
margin-left: 20%;
margin-top: 0;
width: 14%;
}

.img_logo2 img {
margin-left: 74%;
margin-top: 20%;
position: absolute;
width: 14%;
}

.img_logo3 img {
margin-left: 40%;
margin-top: 48%;
position: absolute;
}

jquery.connectingLine: Lines between the nodes not showing.

Lines between the nodes not showing.

I used a canvas inside a popup modal, but the lines not showing.

<style>
    #WorkflowTracking .workflow-item {
        cursor: pointer;
    }
    #WorkflowTracking .workflow-line {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid black;
        /*position: absolute;*/
    }
    #WorkflowTracking .modal-content .modal-header .close {
        z-index: 999999999;
    }
</style>

<div class="modal fade" id="WorkflowTracking" role="dialog" aria-labelledby="WorkflowTrackingLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lgx" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@ApplicationStrings.WorkflowTracking</h5>
                <button type="button" class="close" onclick="ClosePopup('#WorkflowTracking')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="hdnWorkFlowObjectID" value="@ViewBag.WorkFlowObjectID" />
                <div class="row" style="overflow:auto;">
                    <div class="col-12">
                        <div id="WorkflowTracking-graph" class="workflowTracking-graph" style="overflow:auto;">
                            <div class="col-12 workflow-container">
                                <div class="workflow-details"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-dark" onclick="ClosePopup('#WorkflowTracking')">@ApplicationStrings.Close</button>
            </div>
        </div>
    </div>
</div>

var tempData = [
{
"WorkflowId": 1,
"WorkflowItemId": 1,
"WorkflowName": "Mahmoud WFNm", "DestinationNameAr": "محمود",
"DestinationNameEn": "mahmoud",
"WorkflowItemTitle": "Mahmoud WF Item 1",
"WorkflowItemStyle": "",
"DestinationTypeName": "مستخدم",
"DestinationType": 1,
"WorkflowActionName": "إرسال",
"WorkflowAction": 1,
"ActionCreatorAr": "محمود",
"ActionCreatorEn": "mahmoud",
"IsOrganization": false,
"IsLastNode": false
},
{
"WorkflowId": 1,
"WorkflowItemId": 2,
"WorkflowName": "Mahmoud WFNm", "DestinationNameAr": "محمود",
"DestinationNameEn": "mahmoud",
"WorkflowItemTitle": "Mahmoud WF Item 1",
"WorkflowItemStyle": "",
"DestinationTypeName": "ادارة",
"DestinationType": 2,
"WorkflowAction": 2,
"ActionCreatorAr": "محمود",
"ActionCreatorEn": "mahmoud",
"IsOrganization": true,
"IsLastNode": false
},
{
"WorkflowId": 1,
"WorkflowItemId": 1,
"WorkflowName": "Mahmoud WFNm", "DestinationNameAr": "محمود",
"DestinationNameEn": "mahmoud",
"WorkflowItemTitle": "Mahmoud WF Item 1",
"WorkflowItemStyle": "",
"DestinationTypeName": "مستخدم",
"DestinationType": 1,
"WorkflowAction": 3,
"ActionCreatorAr": "محمود",
"ActionCreatorEn": "mahmoud",
"IsOrganization": false,
"IsLastNode": false
}
];

jquery.connectingLine Example.zip

help me please!!