[later phase] [needs design] Component drag handle

A technical challenge here is that the drag handle will be rendered outside of the iFrame but the element being dragged is inside the iFrame.

I believe this can be achieved by making the handle a sortableJS list of 1 item (the currently selected component) and clever configuration of the group property to ensure it can be dragged from and dropped into the main sortableJS list inside the iFrame. Further to that, the component being dragged will have to be manually hidden on dragStart and then probable removed on drop.

This is definitely a front-end issue, not a back-end one 😅 (And from the sounds of #2, a pretty tricky one! 😳)

Thank you for working on this @fazilitehreem! 💯

Something I noticed as part of the video you posted was that the top-level components (i.e. section) drag handle was rendered inside the canvas. However, according to the designs, the drag handle should be rendered outside the canvas in this scenario:

It looks like there's some additional spacing inside the canvas which may need to be removed as part of this issue for this to work.

@lauriii

Something I noticed as part of the video you posted was that the top-level components (i.e. section) drag handle was rendered inside the canvas.

I suspect that what you are describing is specific to the "design" of the placeholder components in the mocked preview data and won't be a problem once we have a real set of components.

The handle is positioned relative to the outline, overlayed above the canvas iframe and would be outside the canvas if the component extended all the way across.

It looks like there's some additional spacing inside the canvas which may need to be removed as part of this issue for this to work.

The spacing inside the canvas again is dependent on the design of the site being previewed so I don't think should be addressed as part of this.

Ah, I didn't realize this was looking the way that it does because the components are implemented in this way. Makes sense! 👍

Thanks for your efforts so far @fazilitehreem - I've left a review on the MR.

I'll try to implement the approach suggested(without injecting it into iFrame) in a seperate MR.Assigning it to me.

Utkarsh_33 → changed the visibility of the branch 3461035-add-draghandle-as-outline's-child to hidden.

Utkarsh_33 → changed the visibility of the branch 3461035-implement-draghandle-new to hidden.

Utkarsh_33 → changed the visibility of the branch 3461035-implement-draghandle-new to active.

I tried something like this, the user can drag the component using the drag handle, and the cursor changes appropriately. The nested components move along with the main component.

document.addEventListener('DOMContentLoaded', () => {
const component = document.getElementById('component1');
const dragHandle = component.querySelector('.drag-handle');

let offsetX, offsetY;
let isDragging = false;

dragHandle.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - component.getBoundingClientRect().left;
offsetY = e.clientY - component.getBoundingClientRect().top;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
if (isDragging) {
component.style.left = `${e.clientX - offsetX}px`;
component.style.top = `${e.clientY - offsetY}px`;
}
}

function onMouseUp() {
isDragging = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
});

@Utkarsh_33 - I have taken your WIP MR and added another commit - basically I have roughly implemented what I suggested in #2. It is definitely not a finished piece of work, but hopefully it's enough to allow you to build on top of it!

I am not currently working on this issue so unassigning it for me.

@jessebaker I hear it was decided yesterday that @Utkarsh_33 should not continue here. Why is that? I thought you just got him going with #18? 🤔

Unfortunately, @Utkarsh_33 hit another issue with implementing the required UX and I have no idea how to proceed either without taking a lot of time to investigate or potentially going back to the UX team to re-think this interaction.

This isn't on the critical path for the Drupalcon demo so I think time is better spent on other, more pressing, issues hence asking him to move on.

The button adjacent to the containers is not the part of sortable list in the screenshots.
So when we drag the button in the swimlane parallel to the sortable list it does not reorder the sections.It only re-orders them when we drag the button inside the red-line border for the sortable list.I have recorded the video explaining the issue. - @Utkarsh_33

I've attached the Video → that Utkarsh made which I think clarifies the issue well.

Unassigning from me in case someone else wants to take a look!

Per #21, signaling this needs product input (potentially design changes), and currently should not be worked on.

Wim Leers → closed merge request !111

Demoting to major since this is not on the critical path. I'll keep this assigned to me because I'd like to ask a designer if there are alternative approaches we could take to avoid this challenge.

👍

wim leers → closed merge request !139

Not actionable yet, so removing from https://contribkanban.com/board/experience_builder.