Issue #598💬 AnsweredOpened November 30, 2017by Geczy2 reactions

Can't "cancel" a drag

快速解答by artf1

Drag back to blocks panel Honestly, never seen kind of UX... why not the classic Esc? (which works already)

Read full answer below ↓

Question

  1. Drag component to canvas
  2. Don't release mouse
  3. Drag back to blocks panel
  4. Component is still applied to canvas

It should instead cancel

Answers (3)

artfDecember 1, 2017

3. Drag back to blocks panel Honestly, never seen kind of UX... why not the classic Esc? (which works already)

GeczyDecember 1, 2017

This is a very common UX anywhere you go

https://w3c.github.io/html/editing.html#drag-and-drop

However it is implemented, drag-and-drop operations must have a starting point (e.g., where the mouse was clicked, or the start of the selection or element that was selected for the drag), may have any number of intermediate steps (elements that the mouse moves over during a drag, or elements that the user picks as possible drop points as he cycles through possibilities), and must either have an end point (the element above which the mouse button was released, or the element that was finally selected), or be canceled. The end point must be the last element selected as a possible drop point before the drop occurs (so if the operation is not canceled, there must be at least one element in the middle step).

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last dragenter or dragover event, and then the drop will be successful, and a drop event will fire at the target. Otherwise, the drag operation is cancelled, and no drop event is fired.

Here's some examples I found 2017-12-01_12-05-21

2017-12-01_12-09-48

2017-12-01_12-12-00

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.