Skip to content
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

Sortable example fixes #1868

Merged

Conversation

mohamedhaddi
Copy link
Contributor

Main changes:

  • Fix bug where, when an item is dragged fast enough before a previous request is completed, dropping it after the request's completion resulted in the addition of an extra item to the list. This is fixed by disabling the sortable on its end event, and re-enabling it on its htmx:afterSwap event.

    Before:

    before.mp4

    After:

    after.mp4
  • Disable draggability of the .htmx-indicator ("Updating...") element.

    Before:

    before.mp4

    After:

    after.mp4

Other changes:

  • Indicate draggable items by showing a grabbing cursor, and change the cursor on .htmx-indicator to default rather than text, since it's not supposed to be selectable especially while hidden.
  • Add missing quote to the form's id.

bug:
when an item is dragged fast enough before the previous request was
completed, dropping after request completion resulted in the addition
of an extra item to the list.

fix:
disable sortable on End event, and re-enable it on htmx:afterSwap.
@alexpetros
Copy link
Collaborator

Is this one ready for review?

@mohamedhaddi
Copy link
Contributor Author

Is this one ready for review?

yes it is @alexpetros

@alexpetros alexpetros added ready for review Issues that are ready to be considered for merging and removed ready for review Issues that are ready to be considered for merging labels Oct 7, 2023
@alexpetros
Copy link
Collaborator

alexpetros commented Oct 9, 2023

Can you add some inline comments in the code explaining what you explain here in the description? It's a good (and I think necessary) fix, but it does take away somewhat from the simplicity of the example so it would help to offset that with a little explanation.

@mohamedhaddi
Copy link
Contributor Author

mohamedhaddi commented Oct 9, 2023

@alexpetros Sure! How does it look?
By the way, earlier I forgot to copy the JS code into the markdown, they're identical now.

Copy link
Collaborator

@alexpetros alexpetros left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it, thanks for the update!

@alexpetros alexpetros merged commit f0ad469 into bigskysoftware:master Oct 9, 2023
@mohamedhaddi mohamedhaddi deleted the sortable_example_fixes branch October 9, 2023 21:54
sjc5 pushed a commit to sjc5/htmx that referenced this pull request Oct 31, 2023
* add missing quotation mark

* make `.htmx-indicator` unsortable

* change cursors to indicate grabbable items

* bug fix:

bug:
when an item is dragged fast enough before the previous request was
completed, dropping after request completion resulted in the addition
of an extra item to the list.

fix:
disable sortable on End event, and re-enable it on htmx:afterSwap.

* add a few inline  comments + better naming
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants