設置jsPlumb線的容器元素

我的畫布中有兩個小綠色div。它可以用一個id myid_templates_editor_canvas在畫布中拖動，使用下面的代碼：設置jsPlumb線的容器元素

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',     
    });  
}

見下面的圖片：

我已經做出了線在使用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');

我不想要在畫布邊界外的線。見第三張照片。

我想線被包含在畫布內具有id myid_templates_editor_canvas。見下面的圖像：上述與代碼的代碼

我試圖改變部分下面，沒有運氣。

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

是，這兩點在某種程度上限制，因爲最大的線的長度是有限的，但仍然走出canvas.Below的邊框是畫布和兩點的HTML設置。

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

來源

2016-06-22 Qerjiuthn

我提出了一個解決我的問題。我將上面的代碼更改爲以下代碼：

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兩個端點可拖動的代碼行。

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

希望它可以幫助每個人都經歷與我同樣的問題。

來源

2016-07-13 00:47:02 Qerjiuthn

我和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>

來源

2016-07-12 17:58:29 trungk18

其實你可以通過jsPlumb設置包容。看我的jsFiddle。您的解決方案無法正常工作的原因是您已經通過jsPlumb設置了可拖動，而不是jQuery。他們不知道其他，所以不能一起工作。您需要提供的選項draggable功能：

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

要知道在jsPlumb更多關於拖動看到help。你可以明確地設置遏制容器，當你jsPlumb的實例：

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

還可以指定DragOptions和DropOptions如果你需要（more info）。

最好通過jsPlumb設置可拖動，作爲加號，拖動完成後不需要調用重畫。具有很多元素的巨大性能優勢。

使用jsPlumb的接口的一個共同特徵是元素是可拖動的。您應該使用在jsPlumbInstance可拖動的方法來配置如下：
myInstanceOfJsPlumb.draggable("elementId"); 
...因爲如果你不這樣做，jsPlumb不會知道的元素已經拖，也不會重新繪製元素。

來源

2016-07-16 21:09:57

設置jsPlumb線的容器元素

回答

相關問題