isaacHagoel / svelte-dnd-action

An action based drag and drop container for Svelte
MIT License
1.77k stars 106 forks source link

Highlight single dndzone where draggable element moves #467

Open bouchtaoui-dev opened 1 year ago

bouchtaoui-dev commented 1 year ago

Hello, first of all, thank you very much for this great library, it should be the default DND lib for svelte :)

I have like 3 dndzones (todo, doing, done), inside of them are card elements to drag them. All work fine, I only have an issue trying to highlight one of the three dndzones if a dragging element is inside of it by changing the style (setting background-color).

The problem now is that all three of them are highlighting by setting the dropTargetClasses. I thought this would only highlight one dndzone wherein the element is dragging.

Is there a simple way to accomplish the behaviour I want (highlight only one dndzone where the element is dragging)?

Otherwise I have to get a reference to the dndzone containers, check which one of them have a dragging element inside it and than set its style accordingly.

bouchtaoui-dev commented 1 year ago

I fixed the problem thnx to the following sugestion in #465

I added a variable currentDropZone and set this variable in consider handler. In the html code I compare currentDropZone with the one to be rendered and based on the result I add a styled class or not.


<div
    class="column {currentDropZone === column.id ? 'droppable' : ''}"
    animate:flip={{ duration: flipDurationMs }}
>

`