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

javascript drag-and-drop angular dragula
qnreck picture qnreck · Mar 14, 2016 · Viewed 9.1k times · Source

I have a Angular2 component using ng2-dragula to drag/drop like this:

@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 issue: if I create multiple "my-comp" component, item inside "card-bag" can not drag/drop across these component although they have the same bag name. These item are only able to drag/drop inside it owned component.

Do we have any configs for drag/drop across components, or this is ng2-dragula limitation?

Thanks.

Answer

Bhushan Gadekar picture Bhushan Gadekar · May 24, 2016

If you are not using [dragulaModel] then drag and drop between nested components works well as long as you only set viewProviders: [ DragulaService ] once in the top/root component.

Remember not to set viewProviders: [ DragulaService ] in other components as it creates new instances for every component.

Edit: Recently I have implemented the given scenario using ng2-dnd npm package. Its better than ng2-dragula and offers easy object passing and other things. It might Solve your issue.

Related questions

How to get files from angular 2 onDrop event?

I tried like this but onDrop method don't return image files when I drop to it... onDragStart(event, data: any) { event.dataTransfer.setData('data', data); } onDrop(event, data: any) { let dataTransfer = event.dataTransfer.getData('data'); event.preventDefault(); } allowDrop(event) { event.…

Read More
How do I remove a file from the FileList

I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList. Now I want to remove some of the files, but I don't …

Read More
HTML5 dragleave fired when hovering a child element

The problem I'm having is that the dragleave event of an element is fired when hovering a child element of that element. Also, dragenter is not fired when hovering back the parent element again. I made a simplified fiddle: http://…

Read More