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);
}
});