WS: Source -> Target Connection

by NesterOne

HTML

<script src="http://localhost:8000/js/jquery.jsPlumb-1.5.3.js"></script>
<div class="workspace-marker" 
     data-shape="Rectangle" 
     id="node1" >
    Hello, World!
</div>

<div class="workspace-target" 
     data-shape="Rectangle" 
     id="node2" 
     style="top:150px;left:200px">
        <input type="text" />
</div>

CSS

.workspace-marker{
    position:absolute;
    z-index: 1031;
    background-color: white;
    border: solid 1px green;
}


.workspace-target{
    position:absolute;
    z-index: 1031;
    background-color: white;
    border: solid 1px green;
}

JavaScript

jsPlumb.importDefaults({
    Connector: "StateMachine",
    ConnectionsDetachable:false,
    PaintStyle: { 
        lineWidth: 2, 
        strokeStyle: "#71C671"
    },
    Endpoint: [ "Dot", { radius: 5 } ],
    EndpointStyle: { fillStyle: "#71C671" }
});


var source = $(".workspace-marker");
var target = $(".workspace-target");



jsPlumb.draggable([source, target]);

//Connect markers
jsPlumb.connect({ 
    source:source,
    target:target,
    anchors: [
        [ "Perimeter", 
         { 
             shape: $(source).attr("data-shape")
         }
        ],
        [ "Perimeter", 
         { 
             shape: $(target).attr("data-shape")
         }
        ]
    ]
});

$(document)
        .mousemove(function(evt){
            console.log(evt);
            $(this).css("cursor", "none");
            
            target
                .css("top", evt.clientY - target.height() / 2)
                .css("left", evt.clientX - target.width() / 2);
            
            jsPlumb.repaintEverything();
        });