在jsPlumb中带有连接器的可拖动元素

Question

我想实现具有可拖动元素的映射应用程序。我已经使用了下面的代码，但是当设置了可拖动的元素时，div元素不可拖动，只有锚点可拖动。我错过了什么？

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> 

使用jQuery可拖动允许格为可拖动但随后的锚变得超然。

所以这两个选项都

1. 使用$（ “博士”）。可拖动（）并找到锚绑定到div
2. 充分利用DIV在jsPlumb可拖动的方式。 draggable（）

或者是我的方法完全错误？

更新：我设置的CSS位置作为div的绝对，现在的div可以拖动，但仍是结合故障

Answer 1

你错过了调用jsPlumb.repaintEverything()一旦DOM元素拖动。

下面是使用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