我的 Canvas 中有两个小的绿色 div
。它可以使用 id myid_templates_editor_canvas
在 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 的边界。下面是 Canvas 和两个点的 html 设置。
<table>
<tr>
<td>
<canvas id="myid_templates_editor_canvas"></canvas>
<div id="div1"></div>
<div id="div2"></div>
</td>
</tr>
</table>
最佳答案
实际上,您可以通过 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了。具有大量元素的巨大性能优势。
关于javascript - 设置 jsPlumb 线的容器元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37958153/