Tabledrag should provide quicker/smoother visual feedback when dragging

Created on 11 January 2023, over 1 year ago
Updated 2 February 2023, over 1 year ago

Problem/Motivation

Discovered in 🐛 Olivero: No differentiation in background color between the hover and drag states within tabledrag Needs work when it was apparent that a UI that truly moved with dragging would eliminate concerns about color-only to represent drag actions.

Plus it would make Tabledrag feel less dated!

Tabledrag moves jerkily, especially with vertical dragging, the pointer needs to move a good amount of distance before there is evidence the row is being moved see this example of the current jerky tabledrag

CSS transform: translate(x,y) can make this smoother, using coordinate data that is already available see this example of how it might look with immediate visual feedback of the row being moved

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Needs work

Version

10.1

Component
Javascript 

Last updated about 6 hours ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Field UX

    Usability improvements related to the Field UI

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States bnjmnm Ann Arbor, MI
  • Status changed to Needs work over 1 year ago
  • 🇫🇮Finland lauriii Finland

    I've manually tested the changes in the MR and while I agree that this addresses a usability problem with the lack of clear indication for the drag start, it seems to be causing other, potentially more severe problems. Most notably, if we don't show a preview for the indentation, it seems very hard to predict the outcome of the drag. That is solved by the Sortable UX by having the item "duplicated" during dragging; one for showing a preview of the row and one for indicating the user that they are dragging the item:

  • 🇺🇸United States bnjmnm Ann Arbor, MI

    The parts I had the most difficulty with in the initial implementation would be much easier with the "duplication" approach offered by Sortable as seen in #11. It looks more intuitive than I expected (and may be a pattern I engage with regularly and don't even realize it)

  • 🇫🇮Finland lauriii Finland

    Linking few related issues here.

    There's some interesting information in #1972462-13: Redesign drag and drop interactions, and nested menu items, for all devices . It seems like based on the UX researcher who looked at Drupals tabledrag back then, the biggest problem was how difficult it was to use on mobile. Based on that, they recommended to look for alternative ways to re-arrange the table to address the issues with mobile. Wondering if that's something we should look into?

Production build 0.69.0 2024