我正在尝试为每个列（积压和迭代）建立一个带有容器div的Scrum PI规划板（Angular 8，Typescript）。我还将放置卡片来表示每次迭代的用户故事。我正在尝试通过领导线来连接卡片，以指示故事之间的依赖性，但是我遇到以下问题/问题-

1. 移动div时，行会中断。
2. 每次更改时，我都需要重置线路。我使用leaderline.position（）函数调用，以使行与连接的div ID对齐。但这仅在卡片在同一容器中移动时有效。
3. 我意识到，每次拖放卡片时都必须重新创建线条。但是作为一个没有JavaScript经验的新手，我发现很难做到这一点。问题主要是您何时/何处删除该行并重新创建它？

我有3个组成部分-导航，Boardview和Tasker。 ngDragDrop在boardview中实现，线条绘制在tasker中实现。我试图在绘制线条时以及拖放操作之后实现线条的重新生成。如何实现呢？我是一个自学成才的开发人员，致力于探索和学习。请在下面找到代码。

app.component.html

<app-navigation></app-navigation>
<app-board-view></app-board-view>

app.component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'poplar';

ngOnInit(){

  };    
}

tasker.html

<div class="card text-white bg-secondary mb-3" style="max-width: 15rem;"  id="{{item}}">
    <div class="card-header" >
    <button type="button" class="btn btn-danger btn-circle btn-sm"(click)="onClickOut($event)"></button>
        {{item}}</div>
    <div class="card-body"  >
      <svg height=20 width =175>
          <circle id="out-{{item}}" cx="160" cy="10" r="5" fill="yellow"  />
          <circle id="in-{{item}}" cx="5" cy="10" r="5" fill="blue" />
      </svg>
      <h5 class="card-title">{{item}}</h5>
      <p class="card-text">{{item}}</p>     
    </div>
  </div>    

tasker.ts

import { Component,OnInit,Inject,Input,} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import 'leader-line';

declare var LeaderLine:any;
declare var LeaderLine2:any;

@Component({
  selector: 'app-tasker',templateUrl: './tasker.component.html',styleUrls: ['./tasker.component.css']
})
export class TaskerComponent implements OnInit {

  @Input()
  item=""  

  constructor(@Inject(DOCUMENT) private document) { }  

  ngOnInit() {     

  } 

  onClickOut($event)
  {
    LeaderLine= new LeaderLine(
      this.document.getElementById('Item 6'),this.document.getElementById('Item 11')


  );

    }    
}

Boardview.html

<main role="main">

    <div class="row" cdkDropListGroup>
      <div class="drag-container" > 
          <div class="section-heading"><h2>Backlog</h2>
            <button type="button" class="btn btn-success btn-circle btn-sm"></button>
          </div>
          <hr>
          <div cdkDropList #BackLog="cdkDropList" [cdkDropListData]="todo"
                class="item-list" (cdkDropListDropped)="drop($event)">
          <app-tasker *ngFor="let item of todo" [item]="item" cdkDrag></app-tasker>
          </div>
      </div>
      <div class="drag-container">
          <div class="section-heading"><h2>Iteration 1</h2>
            <button type="button" class="btn btn-success btn-circle btn-sm"></button>
        </div><hr>
          <div cdkDropList #It1="cdkDropList" [cdkDropListData]="it1" 
                class="item-list" (cdkDropListDropped)="drop($event)">
                <app-tasker *ngFor="let item of it1" [item]="item"cdkDrag></app-tasker>
        </div>
      </div>
      <div class="drag-container">
          <div class="section-heading"><h2>Iteration 2</h2>
            <button type="button" class="btn btn-success btn-circle btn-sm"></button>
        </div><hr>
          <div cdkDropList #It2="cdkDropList" [cdkDropListData]="it2" 
          class="item-list" (cdkDropListDropped)="drop($event)">
          <app-tasker *ngFor="let item of it2" [item]="item" cdkDrag></app-tasker>
  </div>
      </div>
      <div class="drag-container">
          <div class="section-heading"><h2>Iteration 3</h2></div>
          <button type="button" class="btn btn-success btn-circle btn-sm"></button>
          <hr>
          <div cdkDropList #It3="cdkDropList" [cdkDropListData]="it3" 
          class="item-list" (cdkDropListDropped)="drop($event)">
          <app-tasker *ngFor="let item of it3" [item]="item"   cdkDrag></app-tasker>
  </div>
      </div>
      <div class="drag-container">
            <div class="section-heading"><h2>Iteration 4</h2>
                <button type="button" class="btn btn-success btn-circle btn-sm"></button>
            </div><hr>
            <div cdkDropList #It4="cdkDropList" [cdkDropListData]="it4" 
            class="item-list" (cdkDropListDropped)="drop($event)">
            <app-tasker *ngFor="let item of it4" [item]="item"  cdkDrag></app-tasker>
    </div>
      </div>
    </div>

</main>

Boardview.ts

import { Component,OnInit } from '@angular/core';
import {cdkDragDrop,moveItemInArray,transferArrayItem} from '@angular/cdk/drag-drop';
import { DOCUMENT } from '@angular/common';


@Component({
  selector: 'app-board-view',templateUrl: './board-view.component.html',styleUrls: ['./board-view.component.css']
})
export class BoardViewComponent implements OnInit {

  constructor() { }

  ngOnInit() {  
  }

  todo=[
    'Item 1','Item 2'
  ];

  it1=[
    'Item 3','Item 4'
  ];
  it2=[
    'Item 5','Item 6'
  ];
  it3=[
    'Item 7','Item 8'
  ];
  it4=[
    'Item 9','Item 10','Item 11'
  ];

  drop(event: cdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data,event.previousIndex,event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,event.container.data,event.currentIndex);
    }


  }



}

Initial load where the lines are drawn to respective cards

Once card is moved out of the container the arrow breaks