Focus Mode for drag and drop #31935If code mode is open, its cursor automatically moves to the element the mouse is over. If nothing is inserted, the cursor will return to the previous position. This helps power users get a better sense of exactly where they're dropping a pattern without cluttering the interface for non-technical users. |
|
|---|---|
 |
 |
Drag and drop should know what the mouse is near #30468, #31707Our previous drag and drop only knew about what was under the mouse. It now also knows what the mouse is near. This sense of closeness, combined with our new sense of structure, gives us much better guesses about where you'll want the new pattern markup to go. The first example shows that you can insert a pattern badge after a table (or before a list, etc.) by simply moving your badge just a little under the table and letting it go. Our earlier algorithm didn't support this use case because we simply didn't know you were close to the table once you were outside of it. Most other drag and drop implementations have to resort to some pretty hacky UX to get around this (see: large semantic outlines). The second example shows that we can also make smarter suggestions when the mouse is over whitespace in a large container, such as the <body> element.
|
|
|---|---|
 |
 |
 |
 |
Drag and drop should be sensitive to document structure #31708The new algorithm is also aware of the structure of the document—which elements are containers, which are siblings, which shouldn't have children—so it naturally encourages more consistent HTML and provides better, more opinionated suggestions about what should go where. This also means we're able to avoid some glitchy, flickering behaviors since the target element and its parent container changed quite rapidly in the old algorithm. |
|
|---|---|
 |
 |