Inline drag n drop blocks

[MAX-786]

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]

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]

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]

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 :) )