如何使用 ng2-dragula drag/drop 到多个 Angular2 组件

Question

我有一个使用 ng2-dragula 的 Angular2 组件 drag/drop 像这样：

@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" 中的项目不能 drag/drop 跨越这些组件，尽管它们具有相同的包名称。这些项目只能 drag/drop 在其拥有的组件内。

我们是否有跨组件的 drag/drop 配置，或者这是 ng2-dragula 限制？

谢谢。

Answer 1

如果您不使用 [dragulaModel]，那么只要在 top/root 组件中只设置一次 viewProviders: [ DragulaService ]，那么在嵌套组件之间拖放就可以正常工作。

切记不要在其他组件中设置 viewProviders: [ DragulaService ]，因为它会为每个组件创建新实例。

编辑：最近我使用 ng2-dnd npm 包实现了给定的场景。它比 ng2-dragula 更好，并且提供简单的对象传递和其他功能。它可能会解决您的问题。

Answer 2

我得到了一个树结构拖放，工作方式如下：

顶级组件

CSS ViewEncapsulation.None，在此处包含任何 css
德拉古拉指令
DragulaService ViewProvider

在 dragula 服务上注册一个 accepts 过滤器，以阻止物品掉落到自身内部

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

正在 dragula 服务上注册 moves 过滤器，以便将整个项目一起移动

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 在拖动项目时作为放置目标可见。

如何使用 ng2-dragula drag/drop 到多个 Angular2 组件

How to drag/drop to multiple Angular2 component using ng2-dragula

javascript

drag-and-drop

dragula

angular