More tidy up
This commit is contained in:
parent
e71e8ff6b6
commit
0471e113e3
|
@ -223,13 +223,11 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
const onDragStart = (e, component) => {
|
const onDragStart = (e, component) => {
|
||||||
console.log("DRAG START")
|
|
||||||
e.dataTransfer.setDragImage(ghost, 0, 0)
|
e.dataTransfer.setDragImage(ghost, 0, 0)
|
||||||
previewStore.startDrag(component)
|
previewStore.startDrag(component)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onDragEnd = () => {
|
const onDragEnd = () => {
|
||||||
console.log("DRAG END")
|
|
||||||
previewStore.stopDrag()
|
previewStore.stopDrag()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -123,12 +123,10 @@
|
||||||
processEvent(e.clientX, e.clientY)
|
processEvent(e.clientX, e.clientY)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Callback when dragging a new component over the preview iframe in a valid
|
||||||
|
// position for the first time
|
||||||
const startDraggingPlaceholder = () => {
|
const startDraggingPlaceholder = () => {
|
||||||
const mode = GridDragModes.Move
|
const domComponent = document.getElementsByClassName(DNDPlaceholderID)[0]
|
||||||
const id = DNDPlaceholderID
|
|
||||||
|
|
||||||
// Find grid parent and read from DOM
|
|
||||||
const domComponent = document.getElementsByClassName(id)[0]
|
|
||||||
const domGrid = domComponent?.closest(".grid")
|
const domGrid = domComponent?.closest(".grid")
|
||||||
if (!domGrid) {
|
if (!domGrid) {
|
||||||
return
|
return
|
||||||
|
@ -139,15 +137,14 @@
|
||||||
// Show as active
|
// Show as active
|
||||||
domComponent.classList.add("dragging")
|
domComponent.classList.add("dragging")
|
||||||
domGrid.classList.add("highlight")
|
domGrid.classList.add("highlight")
|
||||||
builderStore.actions.selectComponent(id)
|
|
||||||
|
|
||||||
// Update state
|
// Update state
|
||||||
dragInfo = {
|
dragInfo = {
|
||||||
domComponent,
|
domComponent,
|
||||||
domGrid,
|
domGrid,
|
||||||
id,
|
id: DNDPlaceholderID,
|
||||||
gridId: domGrid.parentNode.dataset.id,
|
gridId: domGrid.parentNode.dataset.id,
|
||||||
mode,
|
mode: GridDragModes.Move,
|
||||||
grid: {
|
grid: {
|
||||||
startX: bounds.left + bounds.width / 2,
|
startX: bounds.left + bounds.width / 2,
|
||||||
startY: bounds.top + bounds.height / 2,
|
startY: bounds.top + bounds.height / 2,
|
||||||
|
@ -157,9 +154,6 @@
|
||||||
colEnd: parseInt(styles["grid-column-end"]),
|
colEnd: parseInt(styles["grid-column-end"]),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add event handler to clear all drag state when dragging ends
|
|
||||||
document.addEventListener("mouseup", stopDragging)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Callback when initially starting a drag on a draggable component
|
// Callback when initially starting a drag on a draggable component
|
||||||
|
@ -266,6 +260,5 @@
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
document.removeEventListener("dragstart", onDragStart, false)
|
document.removeEventListener("dragstart", onDragStart, false)
|
||||||
document.removeEventListener("dragover", onDragOver, false)
|
document.removeEventListener("dragover", onDragOver, false)
|
||||||
document.removeEventListener("mouseup", stopDragging, false)
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue