search

reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
307 stars 120 forks source link

Questions about drop zones #3

Closed fperezgaliana closed 7 years ago

fperezgaliana commented 7 years ago

Hi!

I've encapsulated the drop zone inside an Angular 2 component and I have a couple of issues:

But when I hover the drop zone, nothing happens. I've inspected the element and I've realized that it adds a class 'undefined' when I drag over it. Where do I have to declare the css class?

Thanks in advance.

reppners commented 7 years ago

Can you post the html snipped which shows the binding to the dndDragoverClass?

When I drag an object from the 'source' container to any of the drop zones, I need to be able to move this object to the other drop zones but not to the one it's dropped. Is there an easy way to do this?

Thats mainly an application concern. Are the dropzones all in one component? If yes than the component controller can handle this by simply doing the insert in the dndDrop-handler.

If the dropzones are in different components you need to either implement a service which exposes the drop as an event or establish an output on the component so the parent component can bind to the drop event and handle the work needed to update the other dropzones. I'd lean to implement those kind of things in a specific service, especially when the components are not in a direct parent/child relationship or siblings.

Also, I'd like to indentify the source container from where the dragged element comes. It's not a big issue, as I could specify it in the 'data' property, but I wonder if the event contains this data (I coudn't find it).

What is your exact use case? If you need to operate on the source container / source list on successful drag then one of the drag-end handlers should be sufficient (dndCopied, dndMoved, dndLinked or dndCanceled.

You might want to check out the latest demo for lists. Its still work-in-progress but it shows the idea of handling lists.

reppners commented 7 years ago

On the component template file, I've set the 'dndDragoverClass' to be 'highlightBG'. Then, in the component source, I've specified the class in the decorator, like:

I suspect you used this syntax [dndDragoverClass]="highlightBG" but this tries to bind the variable highlightBG which will resolve to undefined so either use dndDragoverClass="highlightBG" or [dndDragoverClass]="'highlightBG'"

fperezgaliana commented 7 years ago

Hi! I realized about the missing single quotes for 'highlightBG' after sending the previous message, sorry!

Regarding the other 2 issues, I'm working on them right now following your advice of encapsulating the containers inside a component that deals with the drop events and perform the logic needed to update the different dropzones.

I'll tell you my progress, thanks again!

reppners commented 7 years ago

Closing because of inactivity - if any issue arises feel free to contact me for reopen or create a new issue.