search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
515 stars 69 forks source link

Is there a way to make the dropTarget's backgroup-color only one line? #218

Closed shawnz42 closed 8 months ago

shawnz42 commented 8 months ago

Thank you for your wonderful library, minop-san, it has helped me a lot!

I'd like to implement a feature, like chrome's bookmark manager, that drags a bookmark on the right into a folder on the left, and highlights only that folder, not including the subfolders.

For example, after I expand the "ff" folder, I would like to drag and drop the G bookmark inside the "ff" folder, I want the only thing highlighted is the "ff" folder itself, not include the subfolder "test-empty".

CleanShot 2023-12-15 at 22 13 33

But the examples I could find were highlighting areas that included subfolders. CleanShot 2023-12-15 at 22 18 02

I studied the dom structure and found that at this point the entire Folder1 and its subfolders are wrapped by the li with class *_dropTarget.

CleanShot 2023-12-15 at 22 26 04

And after I comment the dropTarget in Tree classes, I found li with class=*_dropTarget. is replaced by regular li CleanShot 2023-12-15 at 22 57 12

My thought is is there is a callback to let me change the css of the drop target item when starting to drop?

shawnz42 commented 8 months ago

Closing this issue since I found out that I can use options.isDropTarget, thanks!