7

次のように ng2-dragula を使用してドラッグ/ドロップする Angular2 コンポーネントがあります。

@Component({
  selector: 'my-comp',
  directives: [
    Dragula
  ],
  viewProviders: [
    DragulaService
  ],
  template: `
    <div class="my-div">
      <div *ngFor="#item of items" [dragula]='"card-bag"' [dragulaModel]='items'>
      ...
      </div>
    </div>
  `
})

私の問題:複数の「my-comp」コンポーネントを作成すると、「card-bag」内のアイテムは、同じバッグ名を持っていても、これらのコンポーネント間でドラッグ/ドロップできません。これらのアイテムは、所有するコンポーネント内でのみドラッグ/ドロップできます。

コンポーネント間でドラッグ/ドロップするための構成はありますか? それともこれは ng2-dragula の制限ですか?

ありがとう。

4

2 に答える 2

2

ツリー構造のドラッグ アンド ドロップが次のように機能するようになりました。

最上位コンポーネント

  • CSS ViewEncapsulation.None、ここに CSS を含めます
  • ドラグラ指令
  • DragulaService ViewProvider

  • acceptsアイテムが内部にドロップされないようにするフィルタを dragula サービスに登録する

    accepts: (el: Element, target: Element, source: Element, sibling: Element): boolean => {
 return !el.contains(target); // elements can not be dropped within themselves
},

  • movesアイテム全体が一緒に移動されるように dragula サービスにフィルターを登録する

    moves: (el: Element, container: Element, handle: Element): boolean => {
  // only move favorite items, not the icon element
  return el.tagName.toLowerCase() === 'mvp-navigation-item';
},

  • HTMLテンプレートはこんな感じ

    <div class="nav--favorites__root" [class.is-dragging]="isDragging" [dragula]="'favorites'" [dragulaModel]="favoriteLinks">
  <navigation-item *ngFor="let link of links" [link]="link">
  </navigation-item>
</div>

ナビゲーション項目コンポーネント

  • ドラグラ指令
  • DragulaService ViewProvider がありません

  • HTMLテンプレートはこんな感じ

    <a href class="list-group-item" linkActive="active" [linkTo]="link?.url" (click)="followLink($event, link)">
  <span class="glyphicon glyphicon-{{link?.icon ? link?.icon : 'unchecked'}}"></span>
  <span class="nav__label">{{link?.label}}</span>
</a>
<div *ngIf="link?.children" class="list-group list-group-inverse nav--favorites__submenu" [class.is-expanded]="link?.isExpanded" [class.is-empty]="link?.children?.length === 0" [dragula]="'favorites'" [dragulaModel]="link?.children">
  <navigation-item *ngFor="let childLink of link?.children" [link]="childLink">
  </navigation-item>
  <!-- the nav favorites items must be the first elements in the dragula container or the model sync gets confused -->
  <a class="btn btn-link toggle" (click)="link.isExpanded = !link.isExpanded; $event.preventDefault();"><span class="glyphicon glyphicon-triangle-{{link?.isExpanded ? 'top' : 'bottom'}}"></span></a>
</div>

項目をドラッグしているときに .nav--favorites__submenu がドロップ ターゲットとして表示されるようにスタイルを設定する必要があります。

于 2016-06-16T16:28:09.337 に答える