JsPlumb Issu

 I have the following code  that drag elements from data list  then drop them and connect each other automatically  by a line using  JsPlumb,

i need to be able to insert an element between  two elements, so it will draw a lines before and after new inserted elemenst.

<head runat="server">
    <title></title>
    <script src="//code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js"></script>
    <script>
        
        $(function () {

            //Make element draggable
            $(".dragItem").draggable({
                helper: 'clone',
                cursor: 'move',
                tolerance: 'fit',
                revert: true
            });
            $("#DropArea").droppable({
                accept: '.dragItem',
                activeClass: "drop-area",
                drop: function (e, ui) {

                    x = ui.helper.clone();
                    ui.helper.remove();
                    $(x).removeAttr("class");
                    
                    $(x).addClass("dropItem"); 
                    x.addClass('jsPlumbItem');
                    x.appendTo('#DropArea');
                    
                     AddLine();
                    
                }
            });
        })
        
        function AddLine()
        {
            jsPlumb.removeAllEndpoints();
            var j = 1;
            var previous; 
             
            $("#DropArea").find(".jsPlumbItem").each(function () {

                if (j > 1)
                {
                    var e0 = jsPlumb.addEndpoint(previous);
                    var e1 = jsPlumb.addEndpoint($(this)); 
                     //add line
                    jsPlumb.connect({ source: e0, target: e1 });
                }
                else
                {
                    j++;
                }
                previous = $(this);

            }); 
           
            jsPlumb.draggable($(".jsPlumbItem"));

        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
        <style>
            .dragItem 
            {
                width:50px;
                height:50px;
                background-color:blue;
                float:left; 
            }
            .dropItem 
            {
                width:50px;
                height:50px;
                background-color:red;
                float:left;  
                position:relative;
            }
        </style>
    <div>
     <div id="container" style="width:60px; height:400px;">
         <div id="Item1" class="dragItem">A</div>
         <div id="Item2" class="dragItem">B</div>
         <div id="Item3" class="dragItem">C</div>
     </div>
        <div id="DropArea" style="width: 400px; height:400px; border:solid 1px gray; "></div>
    </div>
    </form>
</body>

Hi Sanfoor,

Your problem is related to JsPlumb, so you could post your problem in JsPlumb forum for professional help.

Best Regards,

Lorris

Leave a Reply