Draggable elements with connectors in jsPlumb

Question

I want to implement a mapping app with draggable elements. I have used the following code but when the draggable is set, the div element is not draggable, only the anchor is draggable. What am I missing?

JSFiddle

<style>
.dd{
  width:60px;
  height:60px;
  border:1px solid red;
  position:relative;
}
</style>
<div class="container">
        <div id="window3" class="dd" style="margin-left:50px;margin-top:100px"></div>
        <div id="window4" class="dd" style="margin-left:400px;margin-top:100px"></div>
</div>
<script>
    jsPlumb.ready(function () {
        //           



        jsPlumb.draggable($(".dd"));



        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);




    });
</script>

using jQuery draggable allows the div to be draggable but then the anchors become detached.

So the two options are

1. Use $(".dr").draggable() and find a way to bind anchors to the div
2. Make the div draggable in jsPlumb.draggable()

Or is my approach completely wrong?

UPDATE: I set the CSS position as absolute in the divs and now the divs are draggable but still the binding is faulty

Answer 1

You missed to invoke jsPlumb.repaintEverything() once the DOM element is dragged.

Here is the version which uses jQuery.draggable()

jsPlumb.ready(function() {

  $('.dd').draggable({
        //listen for element dragged event
        drag: function(){
           jsPlumb.repaintEverything();            
        }
  });


  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);

});

Updated Fiddle