- Notifications
You must be signed in to change notification settings - Fork1.1k
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Drag-n-drop on touch screens (#3916)#3941
Conversation
- Emulates drag&drop events on `BTable` rows on touch-enabled devices. To start drag&drop of a row, a user has to click (tap) the row first. This may not be intuitive, though, touch and drag&drop events have a tradeoff. Since touch events are used to scroll the contents by default, we cannot interpret them as drag&drop events unless we prevent the default behavior; i.e., scrolling. However, I felt trapping scrolling the contents was annoying; scrolling suddenly stops on a table. So I decided to introduce an extra clicking motion to start drag&drop. Code needs refactoring because it is currently redundant. No visual effect while dragging is implemented yet.issuebuefy#3916
- Moves the code that translates touch events as drag events in `BTable` to `src/utils/helpers.js` as `translateTouchAsDragEvent`.
- Emulates drag&drop events on `BTable` columns on touch-enabled devices. Unlike rows, a user does not have to tap columns before starting drag&drop columns because I felt columns trapping scrolling less disturbing. No visual effect is implemented yet.issuebuefy#3916
- Removes unnecessary code from `BTable`. Removed operations are done by drag&drop event handlers rather than touch event handlers.
- Fires "dragstart" events at the first "touchmove" events rather than at "touchstart" events. This will reduce inconsistency that users may feel when they double-tap columns or rows; columns trigger "drop" events on themselves when double-tapped, but rows won't trigger "drop" events. Suppresses "drop" events triggered when users double-tap columns or rows. Now we may tell users "double-tap and hold columns or rows if you want to drag&drop them on touch-enabled devices."issuebuefy#3916
- Introduces visual effects shown while rows or columns on `BTable` are being dragged on touch-enabled devices. The contents of dragged rows or columns are shown in an extra `div` element appended to `BTable`, which has `touch-dragged-cell` class and is referenced as `draggedCell`. `draggedCell` is invisible until rows or columns are draged on touch-enabled devices. Once touch-dragging starts, `draggedCell` becomes visible and tracks the point being touched. It becomes invisible when touch-dragging ends. The content of `draggedCell` is given via potentially unsafe `v-html`, though, it should not matter because only valid HTMLs are assigned. `_table.scss` introduces styles for `touch-dragged-cell` and its children. It has `background-color` with translucent (10%) `$table-background-color`.issuebuefy#3916
✅ Deploy Preview forbuefy-org ready!
To edit notification comments on pull requests, go to yourNetlify site configuration. |
Anyone can test the behavior here:https://deploy-preview-3941--buefy-org.netlify.app/documentation/table#draggable-rowscolumns (Table - Draggable rows/columns) |
I have tested the behavior on
|
I did some testing on the iPhone 11 Pro with the latest safari update and I've that the drag part of this feature does somewhat work. However, the item is being dragged but does not drop as seen in the pictures below. |
- Emulates the visual effects of drag&drop on BTable in the mobile card mode. Cells must be virtically stacked in the mobile card mode. Addresses the following comment: -buefy#3941 (comment)- Also improves the visual effects of drag&drop so that the floating shapes better imitate the dragged rows.- Corrects indentation in `_table.scss`.
@wesdevpro Good catch! The floating shapes in the mobile card mode did not resemble what they were displayed in the table (card list) at all. I think the latest commit better imitates the table contents. |
- Adds how to start dragging rows on touch devices to the documentation page of `BTable`.
@kikuomax I am still having issues with what is displayed in the list after a drag-and-drop attempt. Was the Netlify link rebuilt from the latest commit on this PR? |
@wesdevpro Could you share what you expect to see? FYI, the attached video shows what I had expected and saw on the above Netlify preview on iPhone 15 Pro simulator. DnD.on.iPhone.15.Pro.mp4 |
I was expecting to see the table
@kikuomax I was expecting the table to update when you let go of the table item. If you look at the date in the item you dragged in the video that item never moves. Was this expected? |
@wesdevpro It was expected. The documentation page of buefy/docs/pages/components/table/examples/ExDraggableRows.vue Lines 77 to 81 in0f41154
|
Thank you for the explination. |
* feat(lib): emulate drag&drop on Table row on touch device- Emulates drag&drop events on `BTable` rows on touch-enabled devices. To start drag&drop of a row, a user has to click (tap) the row first. This may not be intuitive, though, touch and drag&drop events have a tradeoff. Since touch events are used to scroll the contents by default, we cannot interpret them as drag&drop events unless we prevent the default behavior; i.e., scrolling. However, I felt trapping scrolling the contents was annoying; scrolling suddenly stops on a table. So I decided to introduce an extra clicking motion to start drag&drop.* feat(lib): emulate drag&drop on Table column on touch device- Emulates drag&drop events on `BTable` columns on touch-enabled devices. Unlike rows, a user does not have to tap columns before starting drag&drop columns because I felt columns trapping scrolling less disturbing.* feat(lib): fire dragstart at first touchmove (BTable)- Fires "dragstart" events at the first "touchmove" events rather than at "touchstart" events. This will reduce inconsistency that users may feel when they double-tap columns or rows; columns trigger "drop" events on themselves when double-tapped, but rows won't trigger "drop" events. Suppresses "drop" events triggered when users double-tap columns or rows. Now we may tell users "double-tap and hold columns or rows if you want to drag&drop them on touch-enabled devices."* feat(lib): add visual effect of touch-dragging (BTable)- Introduces visual effects shown while rows or columns on `BTable` are being dragged on touch-enabled devices. The contents of dragged rows or columns are shown in an extra `div` element appended to `BTable`, which has `touch-dragged-cell` class and is referenced as `draggedCell`. `draggedCell` is invisible until rows or columns are draged on touch-enabled devices. Once touch-dragging starts, `draggedCell` becomes visible and tracks the point being touched. It becomes invisible when touch-dragging ends. The content of `draggedCell` is given via potentially unsafe `v-html`, though, it should not matter because only valid HTMLs are assigned. `_table.scss` introduces styles for `touch-dragged-cell` and its children. It has `background-color` with translucent (10%) `$table-background-color`.* feat(lib): emulate mobile cards dnd effects (BTable)- Emulates the visual effects of drag&drop on BTable in the mobile card mode. Cells must be virtically stacked in the mobile card mode. Addresses the following comment: -buefy#3941 (comment)- Also improves the visual effects of drag&drop so that the floating shapes better imitate the dragged rows.* chore(docs): add how to start dragging (BTable)- Adds how to start dragging rows on touch devices to the documentation page of `BTable`.* test(lib): refresh the snapshot of Table.spec- Merging3c5029b becomes no longer necessary.* Includes suppression of ESLint warning on `v-html`
* feat(lib): emulate drag&drop on Table row on touch device- Emulates drag&drop events on `BTable` rows on touch-enabled devices. To start drag&drop of a row, a user has to click (tap) the row first. This may not be intuitive, though, touch and drag&drop events have a tradeoff. Since touch events are used to scroll the contents by default, we cannot interpret them as drag&drop events unless we prevent the default behavior; i.e., scrolling. However, I felt trapping scrolling the contents was annoying; scrolling suddenly stops on a table. So I decided to introduce an extra clicking motion to start drag&drop.* feat(lib): emulate drag&drop on Table column on touch device- Emulates drag&drop events on `BTable` columns on touch-enabled devices. Unlike rows, a user does not have to tap columns before starting drag&drop columns because I felt columns trapping scrolling less disturbing.* feat(lib): fire dragstart at first touchmove (BTable)- Fires "dragstart" events at the first "touchmove" events rather than at "touchstart" events. This will reduce inconsistency that users may feel when they double-tap columns or rows; columns trigger "drop" events on themselves when double-tapped, but rows won't trigger "drop" events. Suppresses "drop" events triggered when users double-tap columns or rows. Now we may tell users "double-tap and hold columns or rows if you want to drag&drop them on touch-enabled devices."* feat(lib): add visual effect of touch-dragging (BTable)- Introduces visual effects shown while rows or columns on `BTable` are being dragged on touch-enabled devices. The contents of dragged rows or columns are shown in an extra `div` element appended to `BTable`, which has `touch-dragged-cell` class and is referenced as `draggedCell`. `draggedCell` is invisible until rows or columns are draged on touch-enabled devices. Once touch-dragging starts, `draggedCell` becomes visible and tracks the point being touched. It becomes invisible when touch-dragging ends. The content of `draggedCell` is given via potentially unsafe `v-html`, though, it should not matter because only valid HTMLs are assigned. `_table.scss` introduces styles for `touch-dragged-cell` and its children. It has `background-color` with translucent (10%) `$table-background-color`.* feat(lib): emulate mobile cards dnd effects (BTable)- Emulates the visual effects of drag&drop on BTable in the mobile card mode. Cells must be virtically stacked in the mobile card mode. Addresses the following comment: -buefy#3941 (comment)- Also improves the visual effects of drag&drop so that the floating shapes better imitate the dragged rows.* chore(docs): add how to start dragging (BTable)- Adds how to start dragging rows on touch devices to the documentation page of `BTable`.* test(lib): refresh the snapshot of Table.spec- Merging3c5029b becomes no longer necessary.* Includes suppression of ESLint warning on `v-html`
* feat(lib): emulate drag&drop on Table row on touch device- Emulates drag&drop events on `BTable` rows on touch-enabled devices. To start drag&drop of a row, a user has to click (tap) the row first. This may not be intuitive, though, touch and drag&drop events have a tradeoff. Since touch events are used to scroll the contents by default, we cannot interpret them as drag&drop events unless we prevent the default behavior; i.e., scrolling. However, I felt trapping scrolling the contents was annoying; scrolling suddenly stops on a table. So I decided to introduce an extra clicking motion to start drag&drop.* feat(lib): emulate drag&drop on Table column on touch device- Emulates drag&drop events on `BTable` columns on touch-enabled devices. Unlike rows, a user does not have to tap columns before starting drag&drop columns because I felt columns trapping scrolling less disturbing.* feat(lib): fire dragstart at first touchmove (BTable)- Fires "dragstart" events at the first "touchmove" events rather than at "touchstart" events. This will reduce inconsistency that users may feel when they double-tap columns or rows; columns trigger "drop" events on themselves when double-tapped, but rows won't trigger "drop" events. Suppresses "drop" events triggered when users double-tap columns or rows. Now we may tell users "double-tap and hold columns or rows if you want to drag&drop them on touch-enabled devices."* feat(lib): add visual effect of touch-dragging (BTable)- Introduces visual effects shown while rows or columns on `BTable` are being dragged on touch-enabled devices. The contents of dragged rows or columns are shown in an extra `div` element appended to `BTable`, which has `touch-dragged-cell` class and is referenced as `draggedCell`. `draggedCell` is invisible until rows or columns are draged on touch-enabled devices. Once touch-dragging starts, `draggedCell` becomes visible and tracks the point being touched. It becomes invisible when touch-dragging ends. The content of `draggedCell` is given via potentially unsafe `v-html`, though, it should not matter because only valid HTMLs are assigned. `_table.scss` introduces styles for `touch-dragged-cell` and its children. It has `background-color` with translucent (10%) `$table-background-color`.* feat(lib): emulate mobile cards dnd effects (BTable)- Emulates the visual effects of drag&drop on BTable in the mobile card mode. Cells must be virtically stacked in the mobile card mode. Addresses the following comment: -buefy#3941 (comment)- Also improves the visual effects of drag&drop so that the floating shapes better imitate the dragged rows.* chore(docs): add how to start dragging (BTable)- Adds how to start dragging rows on touch devices to the documentation page of `BTable`.* test(lib): refresh the snapshot of Table.spec- Merging3c5029b becomes no longer necessary.* Includes suppression of ESLint warning on `v-html`
Fixes
Proposed Changes
BTableemulate drag-n-drop on touch-enabled devicesBTablecaptures touch events:touchstart,touchmove, andtouchendBTableinserts an extra<div>element to superimpose the dragged contents on the screen, which turns visible only while table rows or columns are being draggedBTableRemarks: users have todouble-tap and hold on a row to start drag-n-drop of the row on touch-enabled devices. Otherwise users cannot do touch-scrolling on
BTable.