jsPlumb行のコンテナ要素を設定します

Question

キャンバスに2つの小さな緑色のdivがあります。私はライン作った

：

myid_templates_editor_make_draggable('div1'); 
myid_templates_editor_make_draggable('div2'); 

// Make an element draggable within the canvas 
function myid_templates_editor_make_draggable(id){      
    jQuery('#' + id).draggable({ 
     cursor: 'move', 
     cursorAt: { top: 56, left: 56 }, 
     containment: '#myid_templates_editor_canvas',     
    });  
} 

は下の画像を参照してください：それは、以下のコードを使用して、ID myid_templates_editor_canvasでキャンバス内でドラッグすることができjsPlumbを使用して2つのドラッグ可能なdivの間。

var jsPlumb_instance = jsPlumb.getInstance(); 
var endpointOptions = { 
       anchor:'BottomCenter', 
       maxConnections:1,      
       endpoint:['Rectangle',{width:'0px', height:'0px' }], 
       paintStyle:{fillStyle:'black'}, 
       connectorStyle : { lineWidth: '1px' , strokeStyle: 'black' }, 
       connector : ['Straight'],     
       setDragAllowedWhenFull:true,      


}; 

div1Endpoint = jsPlumb_instance.addEndpoint('div1', endpointOptions); 
div2Endpoint = jsPlumb_instance.addEndpoint('div2', endpointOptions);  

jsPlumb_instance.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
}); 

jsPlumb_instance.draggable('div1'); 
jsPlumb_instance.draggable('div2'); 

私はキャンバスの枠線の外に線を入れたくありません。 3番目の画像を参照してください。

Iラインは、ID myid_templates_editor_canvas .Seeでキャンバス内に収容されるように以下の画像たい：私はコードで上記のコードの一部を変更しようとした

を以下、運がない。

jsPlumb_instance[id].draggable(id1, {containment:'#myid_templates_editor_canvas'}); 
jsPlumb_instance[id].draggable(id2 , {containment:'#myid_templates_editor_canvas'}); 

はい、2点が最大の行の長さが限られていたので、何とか制約が、それでもcanvas.Belowの国境の外に出たがキャンバスと2点のHTML形式のセットアップです。

<table> 
    <tr> 
     <td> 
      <canvas id="myid_templates_editor_canvas"></canvas> 
      <div id="div1"></div> 
      <div id="div2"></div> 
     </td>   
    </tr> 
</table> 

Answer 1

私は私の問題への解決策をしていました。上記のコードを以下のコードに変更しました。

myid_templates_editor_make_draggable('div1'); 
myid_templates_editor_make_draggable('div2'); 

//Make an element draggable within the canvas 
function myid_templates_editor_make_draggable(id){      
    jQuery('#' + id).draggable({ 
     cursor: 'move', 
     cursorAt: { top: 56, left: 56 }, 
     containment: '#myid_templates_editor_canvas', 
     drag: function(e, ui){  
      jsPlumb_instance.repaintEverything();          
     },    
    });  
} 

また、JsPlumbの2つのエンドポイントをドラッグ可能にするコード行も省略しました。

var jsPlumb_instance = jsPlumb.getInstance(); 
var endpointOptions = { 
    anchor:'BottomCenter', 
    maxConnections:1,      
    endpoint:['Rectangle',{width:'0px', height:'0px' }], 
    paintStyle:{fillStyle:'black'}, 
    connectorStyle : { lineWidth: '1px' , strokeStyle: 'black' }, 
    connector : ['Straight'],     
    setDragAllowedWhenFull:true,      
}; 

div1Endpoint = jsPlumb_instance.addEndpoint('div1', endpointOptions); 
div2Endpoint = jsPlumb_instance.addEndpoint('div2', endpointOptions);  

jsPlumb_instance.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
}); 

私と同じ問題を抱えているすべての人に役立つことを願っています。

Answer 2

すでにjsPlumbでかなり長い間働いていたので、たくさんのライブラリを参照する必要があることを思い出しました。

jsPlumbはjQuery UIのドラッグ可能な機能を使用しているため、この記事を読んで、どのように動作しているかを理解することができます。あなたのケースでは

https://jqueryui.com/draggable/#constrain-movement

、はそれだけで描画するためで、封じ込めとして考えるではありませんmyid_templates_editor_canvas。だから私はあなたのhtmlを変更することをお勧めします。

テーブル要素のIDを入れて、2つのエンドポイントの封じ込めになります。包含は、子要素（つまり、親要素）を含む要素でなければなりません。

myid_templates_editor_make_draggable('div1'); 
 
myid_templates_editor_make_draggable('div2'); 
 

 
// Make an element draggable within the canvas 
 
function myid_templates_editor_make_draggable(id){      
 
    jQuery('#' + id).draggable({ 
 
     cursor: 'move', 
 
     cursorAt: { top: 56, left: 56 }, 
 
     containment: '#main-container',     
 
    });  
 
}

<table id="main-container"> 
 
    <tr> 
 
     <td> 
 
      <canvas id="myid_templates_editor_canvas"></canvas> 
 
      <div id="div1"></div> 
 
      <div id="div2"></div> 
 
     </td>   
 
    </tr> 
 
</table>

Answer 3

実際には、jsPlumbで封じ込めを設定できます。私のjsFiddleを参照してください。あなたのソリューションがうまくいかなかったのは、jQueryではなく、jsPlumbでドラッグ可能に設定しているからです。彼らはそれについて他を知らないので、一緒に働くことはできません。 helpを参照してくださいjsPlumbにドラッグについての詳細を知るためには

jsPlumb_instance.draggable(element, { containment:true }); 

：あなたはdraggable機能にオプションを提供する必要があります。

var jsPlumb_instance = jsPlumb.getInstance({ Container:"inner" }); 

あなたは（more info）を必要とする場合にもDragOptionsとDropOptionsを指定することができます：あなたはjsPlumbのインスタンスを取得するときに、明示的に封じ込めコンテナを設定することができます。

jsPlumbでdraggableを設定する方が良いです。プラスとして、ドラッグが終了した後に再描画を呼び出す必要はありません。多くの要素で大きなパフォーマンス上の利点。

jsPlumbを使用するインターフェイスの一般的な特徴は、要素が ドラッグ可能であることです。そうでない場合は、jsPlumb要素が をドラッグされたことを知らないだろう、それが再描画しないので...

myInstanceOfJsPlumb.draggable("elementId"); 

を：あなたはこのに 設定するには、jsPlumbInstanceにドラッグ可能メソッドを使用する必要があります要素。