Add drag and drop to blockgrid area #19042
Conversation
| @@ -80,7 +80,7 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements | |||
| <uui-icon name="icon-remove"></uui-icon> | |||
| </uui-button> | |||
| </uui-action-bar> | |||
| <umb-block-scale-handler @mousedown=${(e: MouseEvent) => this.#context.scaleManager.onScaleMouseDown(e)}> | |||
| <umb-block-scale-handler @mouseup=${(e: MouseEvent) => this.#context.scaleManager.onScaleMouseDown(e)}> | |||
There was a problem hiding this comment.
It would make sense to rename onScaleMouseDown function, eventually something independant of event type.
I wounder if is can use the similar feature on image cropper focalpoint, which handle both mouse and touch event.
There was a problem hiding this comment.
Probably in another PR, onScaleMouseDown already existed, but it seems it still has problems. Thanks for reviewing
There was a problem hiding this comment.
I would hope we could use the Sorter-Controller as we do in other places to give a consistent experience.
You can see more from a similar implementation here.
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
Notice how this implementation is specially configured for a Grid layout, notice resolvePlacement: resolvePlacementAsBlockGrid.
Also notice how the specific element that is begin moved has some styling for when its begin dragged, you find that from line 688–706 in src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
|
Thank you @nielslyngsoe , I did not know it before. I have applied the Sort controller in my code. Thanks for suggesting 😊 |
|
This PR also fixes the issue #19097. There is a problem that |
Prerequisites
If there's an existing issue for this PR then this fixes
Description
This PR fixes this issue #18851
After fixing:
Recording.2025-04-15.145334.mp4