Inline drag n drop blocks

collective / volto-hydra

A volto addon to let you edit content in realtime when you have many frontends written in any framework

1 stars 2 forks source link

Inline drag n drop blocks #123

Closed MAX-786 closed 3 weeks ago

MAX-786 commented 1 month ago

Fixes #65

What this PR does:

drag-and-drop functionality to reorder blocks within a iframe.
Allows editor to drag a block and drop it before & after another block, visually updating the arrangement (as of now showing a solid blue border above or below the hovered block)
Updates the blocks_layout array to reflect the new order of blocks and send it over to adminUI

on pressing the drag button, Hydrajs will:

[x] Creat a draggable clone of the selected block on mousedown.
[x] Handle mouse movements to position the clone and detect hovered blocks.
[x] Determines wheather to drop block before or after the hovered block
[x] On mouseup, identify the target block & dragged block indexes and update the blocks_layout array.

DEMO:

https://github.com/user-attachments/assets/7f5949df-4b92-4b7f-9479-08bc024b3f1c

MAX-786 commented 1 month ago

I made this ontop of #119 so as soon as it gets merged, i'll merge the main into this so the commit history will be clean

JeffersonBledsoe commented 3 weeks ago

I think it would be clearer if the line appeared between the blocks rather than attached to a block (as there isn't really a difference between dropping a block at the bottom of a block and at the top of the block directly below that), but it's good enough for now and can be improved in the future :)

There is a small layout shift of the block contents that has the bar when the line appears due to adding a border which doesn't exist before. To solve this later, we should probably use a box-shadow to simulate the outline without impacting the sizing from the box model.

No comments from an accessibility perspective due to this being a PoC with a tight time constraint

MAX-786 commented 3 weeks ago

I think it would be clearer if the line appeared between the blocks rather than attached to a block (as there isn't really a difference between dropping a block at the bottom of a block and at the top of the block directly below that), but it's good enough for now and can be improved in the future :)

Ah nice point, but i think it wouldnt be easy to (stylling-wise) to do so, will it be?

There is a small layout shift of the block contents that has the bar when the line appears due to adding a border which doesn't exist before. To solve this later, we should probably use a box-shadow to simulate the outline without impacting the sizing from the box model.

No comments from an accessibility perspective due to this being a PoC with a tight time constraint

yep theoretically that shift can be fixed if we use before psuedo selector and add a top border. but have to play around with it to properly fix it and that's why i let it there but ig later for sure we will do it.

i remembered you mentioned earlier to look from accessibility pov too, I did and i think accessibility like alt-text and all can be done later and not much of a hassle (IG :) )