javascript – 设置jsPlumb行的容器元素

我的画布里面有两个小绿色div.它可以使用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');

我不想要画布边框外的线条.见第3张照片.

我希望该行包含在画布中,其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>

解决方法:

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

标签：jquery,javascript,jquery-ui,jquery-plugins,jsplumb
来源： https://codeday.me/bug/20190608/1199918.html