From d5f2b819bfa10bb11369b2b84d4e11518d085e4a Mon Sep 17 00:00:00 2001
From: komkida91 <gustavokachle@gmail.com>
Date: Sun, 22 Feb 2026 17:52:24 +0100
Subject: [PATCH] fix(builder): use stable canvas container for drop/reorder
 positioning

---
 elementor/templates/elementor_builder.html | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

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