admin/gkachele-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(builder): use stable canvas container for drop/reorder positioning

Browse Source
This commit is contained in:
komkida91
2026-02-22 17:52:24 +01:00
parent b3bb7d57aa
commit d5f2b819bf
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
elementor/templates/elementor_builder.html
View File

@@ -1386,6 +1386,7 @@ const state = {
canvas.appendChild(overlay); canvas.appendChild(overlay);
} }
const inner = document.createElement("div"); const inner = document.createElement("div");
inner.className = "canvas-inner";
inner.style.position = "relative"; inner.style.position = "relative";
inner.style.zIndex = "1"; inner.style.zIndex = "1";
if (!state.settings.free_drag){ if (!state.settings.free_drag){
@@ -1610,6 +1611,10 @@ const state = {
} }
function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; } function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; }
function getCanvasContainer(canvas){
if (!canvas) return null;
return canvas.querySelector(".canvas-inner") || canvas;
}
function getDropIndex(container,y,x){ function getDropIndex(container,y,x){
const blocks=[...container.querySelectorAll(".block")] const blocks=[...container.querySelectorAll(".block")]
.filter((n)=>n.dataset.blockId !== draggingBlockId); .filter((n)=>n.dataset.blockId !== draggingBlockId);
@@ -1654,7 +1659,7 @@ const state = {
function startPointerDrag(blockId, e){ function startPointerDrag(blockId, e){
if (!blockId || state.settings.free_drag) return; if (!blockId || state.settings.free_drag) return;
const canvas = document.getElementById("previewCanvas"); const canvas = document.getElementById("previewCanvas");
const container = canvas ? (canvas.querySelector("div") || canvas) : null; const container = getCanvasContainer(canvas);
if (!container) return; if (!container) return;
pointerDrag = { active: true, id: blockId, index: null, split: null }; pointerDrag = { active: true, id: blockId, index: null, split: null };
draggingBlockId = blockId; draggingBlockId = blockId;
@@ -1709,7 +1714,7 @@ const state = {
function startManualDrag(blockId, e){ function startManualDrag(blockId, e){
if (!blockId || state.settings.free_drag) return; if (!blockId || state.settings.free_drag) return;
const canvas = document.getElementById("previewCanvas"); const canvas = document.getElementById("previewCanvas");
const container = canvas ? (canvas.querySelector("div") || canvas) : null; const container = getCanvasContainer(canvas);
if (!container) return; if (!container) return;
manualDrag = { active: true, id: blockId, index: null }; manualDrag = { active: true, id: blockId, index: null };
draggingBlockId = blockId; draggingBlockId = blockId;
@@ -1750,9 +1755,11 @@ const state = {
function moveBlock(id,toIndex){ function moveBlock(id,toIndex){
const from=state.blocks.findIndex(b=>b.id===id); const from=state.blocks.findIndex(b=>b.id===id);
if (from<0) return; if (from<0) return;
const clamped = Math.max(0, Math.min(state.blocks.length, Number(toIndex))); const numericTo = Number(toIndex);
if (!Number.isFinite(numericTo)) return;
const clamped = Math.max(0, Math.min(state.blocks.length - 1, numericTo));
const [b]=state.blocks.splice(from,1); const [b]=state.blocks.splice(from,1);
const target = clamped > from ? clamped - 1 : clamped; const target = Math.max(0, Math.min(state.blocks.length, clamped));
state.blocks.splice(target,0,b); state.blocks.splice(target,0,b);
selectedBlockId = b.id; selectedBlockId = b.id;
renderPreview(); renderPreview();
@@ -2138,7 +2145,8 @@ const state = {
canvas.addEventListener("dragover",(e)=>{ canvas.addEventListener("dragover",(e)=>{
e.preventDefault(); e.preventDefault();
if (!state.settings.free_drag){ if (!state.settings.free_drag){
const container=canvas.querySelector("div")||canvas; const container=getCanvasContainer(canvas);
if (!container) return;
const index=getDropIndex(container,e.clientY,e.clientX); const index=getDropIndex(container,e.clientY,e.clientX);
showDrop(container,index); showDrop(container,index);
} }
@@ -2154,7 +2162,8 @@ const state = {
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
b.pos = { x: Math.max(0, e.clientX - rect.left - 20), y: Math.max(0, e.clientY - rect.top - 20) }; b.pos = { x: Math.max(0, e.clientX - rect.left - 20), y: Math.max(0, e.clientY - rect.top - 20) };
} else { } else {
const container=canvas.querySelector("div")||canvas; const container=getCanvasContainer(canvas);
if (!container) return;
const index=getDropIndex(container,e.clientY,e.clientX); const index=getDropIndex(container,e.clientY,e.clientX);
state.blocks.splice(index,0,b); state.blocks.splice(index,0,b);
selectedBlockId=b.id; selectedBlockId=b.id;