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

Question

我正在开发一个项目，其中的对象位于 4×X 网格中。我们使用 JS Plumb 来连接这些对象，但我们注意到，当它将对象 4 连接到 对象 5 时，该线会产生一个丑陋的诊断结果，并最终穿过第一个对象的后面排。有没有办法可以将 Draw(); 函数的范围限制为仅前 4 个对象？这样，第五条仍然会下降到一个新行，但不会有对 Angular 线连接器。

这是我的 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 在这里你可以看到我到目前为止所拥有的!我感谢所有对此的帮助!谢谢!

Answer 1

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

由于我们有多个“部分”，每个部分中的对象数量不同，因此我决定构建一个单独的绘制函数。这个可以让我选择线条在绘图中的开始和结束位置。

这是我的新“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，我使用了此函数，以便生成它们，然后添加类。

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

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

将此函数与我现有的 JS 配合后，我能够关闭具有超过 4 个对象的部分上的原始 drawLines(); 函数，并将其替换为该函数。您可以看到新的 breakLines(); 函数如何通过此 JSFiddle 管道传输我的对象。