Javascript 如何使用ng2 dragula拖放到多个Angular2组件

我有一个Angular2组件，使用ng2 dragula进行如下拖放：

@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>
  `
})

@组件({
选择器：“我的公司”，
指令：[
德拉古拉
],
视图提供程序：[
拖拉服务
],
模板：`
...
`
})

我的问题：如果我创建多个“我的薪酬”组件，“卡袋”中的项目不能在这些组件上拖放，尽管它们具有相同的袋名。这些项只能在其拥有的组件内拖放

我们是否有跨组件拖放的配置，或者这是ng2 dragula限制

---

谢谢。

如果您没有使用

[DragularModel]

，那么在嵌套组件之间进行拖放操作效果很好，只要您只在顶部/根组件中设置一次

viewProviders:[DragularService]

记住不要在其他组件中设置

viewProviders:[DragularService]

，因为它会为每个组件创建新实例

编辑：最近我使用

ng2dnd

npm包实现了给定的场景。 它比ng2 dragula更好，并提供轻松的物体传递和其他功能。

---

它可能会解决您的问题。

我得到了一个树形结构拖放操作，如下所示：

@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>
  `
})

顶级组件

• CSS视图封装。无，此处包含任何CSS
• 德拉古拉指令
• Dragular服务视图提供程序
• 注册

  接受dragula服务上的

  过滤器，该过滤器可阻止项目在其内部掉落

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

• 在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>
  

  <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>
  

导航项目组件

• 德拉古拉指令
• 没有服务视图提供程序
• 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>
  

  <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\uu子菜单在拖动项目时显示为拖放目标。

希望其他人可以参与进来，但我认为您必须将其作为bootstrap中的一项全局服务来获得此类功能。问题是，当您在每个组件中单独导入此项时，它会为每个组件创建一个新的实例。如果将其添加到引导中，它将是所有组件的全局附件。我希望这能回答你的问题@莫刚：谢谢。我也考虑过这个想法，但我希望我们能有一个官方的或更好的解决方案来解决这个问题。我解决这个问题的一个方法是，我有一个服务，它是一个全局变量，有一个可观察的列表，每次我在我的应用程序的其他部分需要它时，我都会引用这个可观察的或对象。每当我需要另一个全局可观测或对象时，我只需将其添加到该服务中。但我同意这样做似乎有点倒退。@MorganG你能用一点代码详细说明一下吗？我也试着这么做，但不知道如何在全球范围内得到它。@MorganG你有什么plnkr吗？我有这个问题，除了我有组件的缩略图，我想在拖动缩略图时加载相应的组件。子Dragula中的no-Dragula指令抛出类似“Dragula不是本机属性”的错误。由于未指定任何指令，因此无法启动带有[dragula]的任何标记。不确定您的答案是否正确，我认为不正确。@RC5之后，指令在ngModule中声明，而不是在单个组件中声明。除此之外，一切都还有效。请确保DragularService在顶部组件或ngModule中声明，但不在子组件中声明，因为我们需要该服务的单个共享实例。我不知道，谢谢！这一个对我有用，但我找不到任何方法将示例2的下一个项目拖到一起。我有选择模式，但我不知道如何在拖动模式下保持它在一起…感谢ng2 dnd的提及，这是一个伟大的发现，易于使用，工程伟大！谢谢，ng2 dnd的岩石，我的全部要求是有能力携带数据通过可下拉和可拖动的div，ng2 dnd是完美的，我会推荐任何dnd超过dragula。