jsPlumbのコネクタを持つドラッグ可能な要素

Question

ドラッグ可能な要素を持つマッピングアプリケーションを実装したいと思います。次のコードを使用しましたが、draggableが設定されている場合、div要素はドラッグできません。アンカーのみがドラッグ可能です。私は何が欠けていますか？ jQueryのドラッグを使用して

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> 

div要素がドラッグ可能にすることができますが、その後のアンカーが外れ。

ので、2つのオプションが

1. 使用$（ "DR"）です。ドラッグ可能な（）とjsPlumbでdiv要素をドラッグしてくださいdivの
2. にアンカーをバインドする方法を見つけます。 draggable（）

私のアプローチは完全に間違っていますか？

UPDATE：私はdiv要素に絶対としてのCSSの位置を設定し、現在のdivはドラッグ可能ですが、まだ結合あなたはDOM要素をドラッグしたらjsPlumb.repaintEverything()を呼び出すために逃した障害のある

Answer 1

です。ここで

は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