jsplumb dynamic anchor drag

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.0.7/jsPlumb.min.js"></script>
<div id="window3" class="dd" style="margin-left:50px;margin-top:100px"></div>
<div id="window4" class="dd" style="margin-left:400px;margin-top:135px"></div>
<div id="window5" class="dd" style="margin-left:400px;margin-top:116px"></div>

CSS

.dd{
  width:60px;
  height:60px;
  border:1px solid red;
}

JavaScript

jsPlumb.ready(function() {

  $('.dd').draggable(
    {
        drag: function(){
        jsPlumb.repaintEverything();
        //jsPlumb.repaint($(this)); 

    }
});
  

  var endpointOptions = {
    isSource: true,
    isTarget: true,
    endpoint: ["Dot", {
      radius: 10
    }],
    style: {
      fillStyle: 'blue'

    },
    maxConnections: -1,
    connector: "Straight",
    connectorStyle: {
      lineWidth: 3,
      strokeStyle: 'black'

    },
    scope: "blackline",
    dropOptions: {
      drop: function(e, ui) {
        alert('drop!');
      }
    }
  };
  var window3Endpoint = jsPlumb.addEndpoint('window3', {
    anchor: "Right"
  }, endpointOptions);
  var window4Endpoint = jsPlumb.addEndpoint('window4', {
    anchor: "Left"
  }, endpointOptions);
  var window4Endpoint = jsPlumb.addEndpoint('window5', {
  	anchor: "Right"
  }, endpointOptions);




});