设置 jsPlumb 线的容器元素

Question

我的画布中有两个绿色的小divs。可以使用以下代码在画布中拖动它，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');

我不希望画布边框外的线条。见第三张图。

我希望该行包含在画布中，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'});   

是的，这两个点在某种程度上受到了限制，因为最大线的长度是有限的，但仍然超出了画布的边界。下面是画布和两个点的 html 设置。

<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如下尝试，让我知道你的结果。

我为表格元素设置了一个 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

其实你可以通过 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设置draggable，这样就不用在拖动完成后调用repaint了。大量元素带来巨大的性能优势。

使用 jsPlumb 的接口的一个共同特点是元素是 可拖动的。您应该使用 jsPlumbInstance 上的可拖动方法来 配置这个：

myInstanceOfJsPlumb.draggable("elementId");

...因为如果你不这样做，jsPlumb 不会知道一个元素已经 拖动，它不会重新绘制元素。

Answer 3

我已经解决了我的问题。我将上面的代码更改为下面的代码：

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

希望它能帮助和我遇到同样问题的每个人。