Droppable not working between different components.

[vgogov]

Is it possible to drag and drop items from different components? I'am able to fire off an OnDragStart event. But when I drop the item into the droppable area it doesn't fire off the onDrop event.

Example: I'm trying this in the ng2-Admin project where my items that are draggable are in the blue dashboard area and my droppable area is the black sidebar to the left. If I take an item from the dashboard I get the onDragStart event, but when I drop it onto the left sidebar, the onDrop event doesn't fire.

[ObaidUrRehman]

This should work just fine even if you have draggables and droppables in different components. Where is your onDrop handler? Can you reproduce this in a Plunkr example? Use this one as a starting point: http://plnkr.co/edit/2bjGgzWnbFrciEiCKLew?p=preview

[vgogov]

Hi @ObaidUrRehman thanks for the reply. It's kind of hard to replicate in Plunkr. But basically in that ng2-Admin project in the dashboard.html. I added the line a the top:

<div draggable (onDragStart)="onDrag()"><h3>DRAG ME </h3></div>

The in the dashboard.component.ts I added:

onDrag(){ console.log("DRAG STARTED") }

When I start dragging the " DRAG ME" test it fires the even and console logs "DRAG STARTED".

Now in the baSidebar.html under the I added:

<div droppable (onDrop)="onDrop()" ><h3>DROP ON HERE</h3></div>

And finally in the baSidebar.component.ts I added:

onDrop(){ console.log("I WAS DROPPED!") }

So now when I start dragging the text from the dashboard it fires off the OnDrag handler. When I drag over to the sidebar and drop it over the "DROP ON HERE" text, nothing happens and nothing appears in the console log.

[ObaidUrRehman]

@vgogov In which module did you import the Ng2DragDrop module? I imported and added it to the module in app\theme\nga.module.ts module and it seems to work just fine.

Because the Sidebar and dashboard are in different modules, its not working as expected. Let me look into this.

[vgogov]

@ObaidUrRehman Alright sweet! I've looking at it for a bit and no luck so far. Tell me if you find anything. Thanks!

[mubashirhanif]

@vgogov I think the problem is with dropScope if you want to enable cross components drops you need to put the source scope name in the dropScope of the target. for example I forked @ObaidUrRehman plunk to this and now you can drop elements in the delete droppable.

[mubashirhanif]

@vgogov but cross component the source object becomes sort of immutable. Haven't had a chance to look into it further.

[vgogov]

@mubashirhanif Hmm, I tried that but doesn't work. One way I can get it to work is If I use (onDragEnter) I can fire off event, it's not a pretty solution. Still trying to figure out why (onDrop) doesn't work. Interestingly (onDragOver) does not work either, only (onDragEnter) works -.-'.

[choeller]

@ObaidUrRehman Any news about this? We are trying to use your Module in our project but we are also experiencing problems when trying to do cross-module drag-drop

[ObaidUrRehman]

@choeller, this has been fixed, See #61. Need to merge it to master. Expect a few days for v3.0.0. If its really urgent let me know.

[ObaidUrRehman]

Fixed in v2.5.0