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

见下图:

javascript - 设置 jsPlumb 线的容器元素-LMLPHP

javascript - 设置 jsPlumb 线的容器元素-LMLPHP

我使用 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 边框外的线。见第三张图。

javascript - 设置 jsPlumb 线的容器元素-LMLPHP

我希望该行包含在带有 id myid_templates_editor_canvas 的 Canvas 中。见下图:

javascript - 设置 jsPlumb 线的容器元素-LMLPHP

我尝试用下面的代码更改上面的部分代码,但没有成功。
 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" });

如果需要,您还可以指定 DragOptionsDropOptions ( more info )。

最好通过jsPlumb设置draggable,作为一个加号,这样拖动完成后就不需要再调用repaint了。具有大量元素的巨大性能优势。

关于javascript - 设置 jsPlumb 线的容器元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37958153/

10-12 12:55
查看更多