-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: drag n drop like trello in example #785
Conversation
This is sample demo. trello.webmI see no recent activity on the issue, so I gave it a shot. Let me know if this looks good. @matijaSos |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great, awesome work! Added a few minor style suggestions. The last thing here is then to implement tilting of a list while it is being dragged, but we can open a separate issue for that.
examples/waspello/ext/MainPage.js
Outdated
@@ -187,6 +191,11 @@ const List = ({ list, index, cards }) => { | |||
setIsPopoverOpen(false) | |||
} | |||
|
|||
const handleHeadingClick = (e) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const handleHeadingClick = (e) => { | |
const handleHeadingClicked = (e) => { |
We usually write handlers in passive (e.g. "handleButtonPressed"), so just to keep it standardized across the codebase.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
examples/waspello/ext/MainPage.js
Outdated
@@ -169,12 +169,16 @@ const Lists = ({ lists, listIdToCardsMap }) => { | |||
|
|||
const List = ({ list, index, cards }) => { | |||
const [isPopoverOpen, setIsPopoverOpen] = useState(false) | |||
const [showHeaderTarget, setShowHeaderTarget] = useState(true); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const [showHeaderTarget, setShowHeaderTarget] = useState(true); | |
const [isHeaderTargetShown, setIsHeaderTargetShown] = useState(true); |
We usually start boolean values with is
, so tried to rewrite it to follow this rule.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
I have updated the code as per comments |
Awesome, will merge today! |
@anup-a merged! Thanks again for your help, really cool that you fixed this :) |
Description
This change will allow drag n drop like Trello. I did a deep dive into Trello's code, and tried to mimic the feature in same exact manner.
Fixes #338
Type of change
Please select the option(s) that is more relevant.