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

问题描述：

我正在处理一个项目，其中的对象位于4 x X网格中。我们使用JS Plumb来连接这些对象，但是我们注意到它连接object 4到object 5时，该线条进行了非常规的诊断并在第一行后面结束。有什么办法可以将Draw();函数的范围仅限于前4个对象？那样的话，第五名仍然会落到新的位置，但不会有对角线连接器。使用JSPlumb仅分离父项中的最后一个子项

这里是我的JS功能

在我的功能，我用我的对象的父元素类的no-lines定义一组，将不会得到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这里是你可以看到我有这么远！我感谢所有帮助！谢谢！

答

好的，所以我想出了一个解决方案。

由于我们在每个父对象中有多个不同数量的对象，因此我决定创建一个单独的绘图函数。这一个让我选择我的线在图纸中开始和停止的地方。

因此，这里是我的新“画”又名breakLines();功能。在我的动态div的

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

，以获得加1-4，我用这个功能，这样他们就可以生成，然后有类加。

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

**注意，的div是不是在我的小提琴动态的，但我的活页上的他们:)

装修与我exisiting JS此功能后，我才得以关闭原始drawLines();函数在具有超过4个对象的部分上，并用此替换它。你可以看到新的breakLines();函数如何管道我的对象在这个JSFiddle

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

相关推荐