fix(builder): use stable canvas container for drop/reorder positioning
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user