diff --git a/app/common/constants.ts b/app/common/constants.ts index 930bfcb69..d0d5d091a 100644 --- a/app/common/constants.ts +++ b/app/common/constants.ts @@ -14,6 +14,7 @@ export enum EditorAttributes { DATA_ONLOOK_ORIGINAL_INDEX = 'data-onlook-original-index', DATA_ONLOOK_DRAGGING = 'data-onlook-dragging', DATA_ONLOOK_DRAG_DIRECTION = 'data-onlook-drag-direction', + DATA_ONLOOK_DRAG_START_POSITION = 'data-onlook-drag-start-position', DATA_ONLOOK_NEW_INDEX = 'data-onlook-new-index', DATA_ONLOOK_UNIQUE_ID = 'data-onlook-unique-id', DATA_ONLOOK_EDITING_TEXT = 'data-onlook-editing-text', diff --git a/app/electron/preload/webview/elements/move/drag.ts b/app/electron/preload/webview/elements/move/drag.ts index 32750c68f..1bd91fe5c 100644 --- a/app/electron/preload/webview/elements/move/drag.ts +++ b/app/electron/preload/webview/elements/move/drag.ts @@ -20,6 +20,8 @@ export function startDrag(selector: string): number { const originalIndex = htmlChildren.indexOf(el); prepareElementForDragging(el, originalIndex); createStub(el); + const pos = getAbsolutePosition(el); + el.setAttribute(EditorAttributes.DATA_ONLOOK_DRAG_START_POSITION, JSON.stringify(pos)); return originalIndex; } @@ -33,7 +35,14 @@ export function drag(dx: number, dy: number, x: number, y: number) { el.style.width = styles.width; el.style.height = styles.height; el.style.position = 'fixed'; - el.style.transform = `translate(${dx}px, ${dy}px)`; + + const pos = JSON.parse( + el.getAttribute(EditorAttributes.DATA_ONLOOK_DRAG_START_POSITION) || '{}', + ); + const left = pos.left + dx; + const top = pos.top + dy; + el.style.left = `${left}px`; + el.style.top = `${top}px`; moveStub(el, x, y); } @@ -81,6 +90,8 @@ function prepareElementForDragging(el: HTMLElement, originalIndex: number) { transform: el.style.transform, width: el.style.width, height: el.style.height, + left: el.style.left, + top: el.style.top, }; el.setAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE, JSON.stringify(style)); @@ -121,6 +132,7 @@ function removeDragAttributes(el: HTMLElement) { el.removeAttribute(EditorAttributes.DATA_ONLOOK_SAVED_STYLE); el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAGGING); el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAG_DIRECTION); + el.removeAttribute(EditorAttributes.DATA_ONLOOK_DRAG_START_POSITION); } function saveElementIndex(el: HTMLElement, newIndex: number) { @@ -135,3 +147,11 @@ function saveElementIndex(el: HTMLElement, newIndex: number) { el.removeAttribute(EditorAttributes.DATA_ONLOOK_NEW_INDEX); } } + +function getAbsolutePosition(element: HTMLElement) { + const rect = element.getBoundingClientRect(); + return { + left: rect.left + window.scrollX, + top: rect.top + window.scrollY, + }; +} diff --git a/demos/remix/app/routes/_index.tsx b/demos/remix/app/routes/_index.tsx index b7a1817f4..e6d8f0177 100644 --- a/demos/remix/app/routes/_index.tsx +++ b/demos/remix/app/routes/_index.tsx @@ -23,30 +23,30 @@ export default function Index() { - 5m Quick Start + Remix Docs
  • - 30m Tutorial + 5m Quick Start
  • - Remix Docs + 30m Tutorial