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

Drag and drop on long press #23497

Closed
wants to merge 2 commits into from
Closed

Drag and drop on long press #23497

wants to merge 2 commits into from

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Jun 26, 2020

Description

As you can see at the end of the GIF, dragging and animation is cancelled if you start selecting text or you let go.

long-press-drag

See #25237, #41665.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Jun 26, 2020

Size Change: +1.57 kB (0%)

Total Size: 1.13 MB

Filename Size Change
build/annotations/index.js 3.62 kB +1 B
build/block-directory/index.js 7.37 kB +6 B (0%)
build/block-editor/index.js 109 kB +511 B (0%)
build/blocks/index.js 48.2 kB -1 B
build/components/index.js 198 kB +706 B (0%)
build/components/style-rtl.css 15.9 kB +131 B (0%)
build/components/style.css 15.9 kB +138 B (0%)
build/compose/index.js 9.65 kB +28 B (0%)
build/edit-post/index.js 303 kB -4 B (0%)
build/edit-site/index.js 16.6 kB -2 B (0%)
build/edit-site/style-rtl.css 3.03 kB +9 B (0%)
build/edit-site/style.css 3.03 kB +11 B (0%)
build/edit-widgets/index.js 9.32 kB -2 B (0%)
build/editor/index.js 44.8 kB +1 B
build/editor/style-rtl.css 3.85 kB +18 B (0%)
build/editor/style.css 3.85 kB +19 B (0%)
build/plugins/index.js 2.56 kB -1 B
build/server-side-render/index.js 2.68 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 941 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.6 kB 0 B
build/block-library/index.js 130 kB 0 B
build/block-library/style-rtl.css 8.04 kB 0 B
build/block-library/style.css 8.04 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.19 kB 0 B
build/edit-navigation/index.js 9.87 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/style-rtl.css 5.51 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-widgets/style-rtl.css 2.42 kB 0 B
build/edit-widgets/style.css 2.42 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.73 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 450 B 0 B
build/list-reusable-blocks/style.css 451 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 663 B 0 B
build/nux/style.css 660 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ZebulanStanphill ZebulanStanphill added [Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Enhancement A suggestion for improvement. labels Jun 26, 2020
@shaunandrews
Copy link
Contributor

shaunandrews commented Jul 3, 2020

I love this in concept, but with the way the drag-and-drop behavior has recently changed — where the block being dragged now disappears from view — this feels disorienting.

I think some of it is that I'm not initiating the drag from the block toolbar. But when dragging, the block toolbar is the only thing I see and its attached to my pointer.

@mapk
Copy link
Contributor

mapk commented Jul 3, 2020

Thanks for the exploration! I've been fiddling with it.

The animation of the block growing to indicate the drag is a bit awkward. I wonder if dimming the block, or increasing an overlay opacity from light to darker might work better? So as the longpress is happening, the block gets darker until, SWOOP, it's sucked into the little black drag box (whatever we're calling it).

I found an issue with the resizers on a Cover block. I assume this exists with Image blocks and Spacer blocks too. When clicking to drag a resize node, the longpress action triggers for drag and drop.

cover

@mapk
Copy link
Contributor

mapk commented Jul 3, 2020

It appears we've lost some z-index elevation on the drag box too.

zindex

@mapk
Copy link
Contributor

mapk commented Jul 3, 2020

Also just noticed this longpress drag is triggered when attempting to zoom with the new image editing features.

zoom

@ellatrix
Copy link
Member Author

ellatrix commented Jul 5, 2020

I'm going to close this exploration since it seems like this is not something we can do on some touch devices anyway. In iOS, long press on a word is meant to select it.

@ellatrix ellatrix closed this Jul 5, 2020
@ellatrix ellatrix deleted the try/long-press-drag-drop branch July 5, 2020 18:29
@ellatrix ellatrix restored the try/long-press-drag-drop branch October 27, 2020 16:11
@ellatrix ellatrix reopened this Oct 27, 2020
@ellatrix
Copy link
Member Author

Update: I think we can maybe work around the iOS conflict if it doesn't feel too awkward. We can also long press after a selection is finished if the user is still pressing for 1 second. This would effectively make it a bit longer for iOS users to start a drag from long press on text (but not on other content).

Regarding the other conflict with resizing and zoom, we can treat it the same as selection, so cancel the long press if resizing is detected.

I agree about the animation. I think for consistency we should keep the block box for long press, even if the drag didn't start in the toolbar. A smooth animation from the block to a black box seems like a cool idea, but animation isn't my forte. @jasmussen What do you think about the transition from block to black box?

@talldan talldan linked an issue Jan 13, 2021 that may be closed by this pull request
@jasmussen
Copy link
Contributor

Awesome Ella!

What do you think about the transition from block to black box?

Just to be sure I'm understanding it, is this animation what you're referring to?

Due to all the excellent challenges outlined in this post, I think for starters we should probably only actually start the animation the moment the drag action is actually invoked. I.e. after whatever timer we land on has run out.

At that point, the animation should be fast, like 0.2s max. The most obvious approach I can imagine is that the block being moved fades out and collapses, while the little black chip pops into existance. Google Tasks sort of shows how this can look:

Jan-13-2021 09-09-31

I recall the primary challenge with that is that we couldn't make adjacent blocks in the canvas animate to fill up the space left by the block "lifted". That might become more evident with this animation.

In absence of figuring out how to do that, it's probably fine for the animation to simply be the chip animating from zero and into existance, as the block is lifted.

@paaljoachim
Copy link
Contributor

Hi @ellatrix Ella how is the long press PR coming along? It looks great Ella and Joen! It sure helps to improve drag and drop.

@paaljoachim
Copy link
Contributor

I happen to come across this issue:
Click-and-hold highlighted text to reposition it
#3339

That makes it a bit tricky with longpress to move a block.

Base automatically changed from master to trunk March 1, 2021 15:43
tellthemachines added a commit that referenced this pull request Nov 14, 2023
@tellthemachines
Copy link
Contributor

I was trying to get these changes working with our current version of drag and drop but haven't got very far. I dumped what I have over here in case anyone else is interested in giving it a go! Dragging kind of works but dropping doesn't 😄

@ellatrix
Copy link
Member Author

Let's close this in favour of #63267.

@ellatrix ellatrix closed this Aug 13, 2024
@ellatrix ellatrix deleted the try/long-press-drag-drop branch August 13, 2024 18:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Drag & Drop using long press.
7 participants