使用 JSPlumb 仅分离父级中的最后一个子级

Question

我正在做一个项目，我们在 4×X 网格中有对象。我们正在使用 JS Plumb 来连接这些对象，但我们注意到当它连接 object 4 到 object 5 时，该线产生了一个丑陋的诊断并最终穿过第一行后面。有没有办法可以将 Draw(); 函数的范围限定为前 4 个对象？这样，第 5 行仍会换行，但不会有对角线连接器。

这是我的 JS 函数

在我的函数中，我在对象的父元素上使用 no-lines 的 class 来定义一个根本不会获得 drawLines(); 函数的组。我相信，因为我是根据父函数绘制这些的，所以我将无法停止我父 last-child 的绘制事件。

$(document).ready(function(){

        var drawLines = function(){
            $('.training-directory-methodology-stage-classes').not('.no-lines').each(function(){

                var newplumb = jsPlumb.getInstance();

                $(this).find('.training-directory-methodology-stage-class').each(function(index, value){
                    current_class = $(this);

                    if(index>0) {
                        newplumb.connect({
                            source: previous_class,
                            target: current_class,
                            anchor: "Center",
                            connector: "Straight",
                            endpoint: "Blank",
                            paintStyle:{lineWidth:6, strokeStyle:'#4A5C68' }

                        });
                    };

                    previous_class = current_class;

                });
            });
        };

        jsPlumb.ready(function() {
            drawLines();
        });

        $(window).resize(function(){
            $('._jsPlumb_connector').remove();
            drawLines();
        });
});

以下是我试过的一些功能

$(document).ready(function(){
    jsPlumb.detachAllConnections('#jsPlumb_5_20');
    jsPlumb.removeAllEndpoints('#jsPlumb_5_20');
    jsPlumb.detach('#jsPlumb_5_20');
});

我也尝试过基于我的父容器分离，但无济于事。

jsPlumb.detach('convert-container:last-child');

由于这些项目往往代码量很大，所以我创建了 JSFiddle 在这里，您可以看到我到目前为止的成果！我感谢所有的帮助！谢谢！

Answer 1

好的，所以我找到了解决方案。

由于我们有多个 'sections'，每个父对象中的对象数量不同，我决定构建一个单独的绘制函数。这让我可以选择我的线条在绘图中的开始和停止位置。

这是我的新 'draw' 又名 breakLines(); 函数。

var breakLines = function(){
    // Check this class for the class of '.no-lines'
    $('.training-directory-methodology-stage-classes').filter('.no-lines').each(function(){
      jsPlumb.Defaults.Endpoint = "Blank";
      var endpointOptions = { isSource: true, isTarget: true };
      //Use the iterative divs to find the first and fourth child
      var convert1 = jsPlumb.addEndpoint( $('.convert1'), { anchor: "Center" }, endpointOptions );
      var convert4 = jsPlumb.addEndpoint( $('.convert4'), { anchor: "Center" }, endpointOptions );

      // New Connection
      jsPlumb.connect({
        source: convert1,
        target: convert4,
        anchor: "Center",
        connector: "Straight",
        endpoint: "Blank",
        paintStyle:{ lineWidth:6, strokeStyle:'#4A5C68' }
      }); 
    });
  };

为了在我的动态 div 上添加 1-4，我使用了这个函数来生成它们，然后添加 class。

$(document).ready(function() {
  $(".convert-container").each(function(i) {
    $(this).addClass("convert" + (i+1));
  });
 });

**注意，div 在我的 fiddle 中不是动态的，但在我的实时页面上它们是:)

将此功能与我现有的 JS 相匹配后，我能够关闭具有 4 个以上对象的部分的原始 drawLines(); 功能，并将其替换为此功能。您可以在 JSFiddle

中看到新的 breakLines(); 函数如何通过管道传输我的对象

使用 JSPlumb 仅分离父级中的最后一个子级

Detaching only the last child in parent using JSPlumb

javascript

jquery

jsplumb