设置 jsPlumb 线的容器元素

Question

我的 canvas 内有两个绿色的小 div。它可以在 canvas 内拖动，id 为 myid_templates_editor_canvas，使用下面的代码：

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

我不想要 canvas 边界外的线。见第三张图。

我希望该行包含在 ID 为 myid_templates_editor_canvas 的 canvas 中。参见下图：

我尝试用下面的代码更改上面的部分代码，但没有成功。

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

是的，这两个点在某种程度上被限制了，因为最大线的长度是有限的，但仍然超出了 canvas.Below 的边界是 html 的设置 canvas 和两点。

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

Answer 1

我使用 jsPlumb 已经很长时间了，我记得它需要引用很多库。

因为 jsPlumb 使用 jQuery UI 中的可拖动特性，您可以阅读这篇文章以了解它是如何工作的。

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

在你的情况下，myid_templates_editor_canvas 不会被视为收容，它仅用于绘图。所以我建议你修改你的 html 试试，让我知道你的结果。

我为 table 元素添加了一个 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 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: '#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,
});

希望对和我有同样问题的大家有所帮助。

Answer 3

实际上，您可以通过 jsPlumb 设置包容。看我的jsFiddle。您的解决方案不起作用的原因是您通过 jsPlumb 设置了可拖动，而不是 jQuery。他们不知道其他的，所以不能一起工作。您需要为 draggable 函数提供选项：

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

要了解有关 jsPlumb 中可拖动的更多信息，请参阅 help。您可以在获取 jsPlumb 实例时显式设置包含容器：

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

如果需要 (more info)，您还可以指定 DragOptions 和 DropOptions。

最好通过jsPlumb设置draggable，这样拖完就不用调用repaint了。具有大量元素的巨大性能优势。

A common feature of interfaces using jsPlumb is that the elements are draggable. You should use the draggable method on a jsPlumbInstance to configure this:
myInstanceOfJsPlumb.draggable("elementId");
...because if you don't, jsPlumb won't know that an element has been dragged, and it won't repaint the element.

设置 jsPlumb 线的容器元素

Set Container Element of a jsPlumb Line

javascript

jquery

jquery-ui

jquery-plugins

jsplumb