1
0
Fork 0
mirror of synced 2024-06-18 02:14:56 +12:00

Allow normal DND in and out of grid children

This commit is contained in:
Andrew Kingston 2022-10-18 18:49:24 +01:00
parent 465d10a8be
commit 4e17942a1d
5 changed files with 20 additions and 12 deletions

View file

@ -4573,7 +4573,9 @@
"hasChildren": true,
"styles": [
"size"
]
],
"illegalChildren": ["grid", "section"],
"allowedDirectChildren": [""]
},
"formblock": {
"name": "Form Block",

View file

@ -23,7 +23,10 @@
$: drop = $dndStore.drop
const insideGrid = e => {
return e.target?.closest?.(".grid") != null
return e.target
?.closest?.(".component")
?.parentNode?.closest?.(".component")
?.childNodes[0]?.classList.contains("grid")
}
// Util to get the inner DOM node by a component ID
@ -218,7 +221,7 @@
// Callback when on top of a component.
const onDragOver = e => {
if (!source || !target || insideGrid(e)) {
if (!source || !target) {
return
}
handleEvent(e)
@ -226,7 +229,7 @@
// Callback when entering a potential drop target
const onDragEnter = e => {
if (!source || insideGrid(e)) {
if (!source) {
return
}
@ -249,7 +252,7 @@
// Callback when dropping a drag on top of some component
const onDrop = e => {
if (!source || !drop?.parent || drop?.index == null || insideGrid(e)) {
if (!source || !drop?.parent || drop?.index == null) {
return
}

View file

@ -11,7 +11,13 @@
$: applyStyles(dragNode, gridStyles)
const insideGrid = e => {
return e.target?.closest?.(".grid") || e.target.classList.contains("anchor")
return (
e.target
?.closest?.(".component")
?.parentNode?.closest?.(".component")
?.childNodes[0]?.classList.contains("grid") ||
e.target.classList.contains("anchor")
)
}
// Util to get the inner DOM node by a component ID

View file

@ -9,21 +9,17 @@
const onMouseOver = e => {
// Ignore if dragging
if (e.buttons > 0) {
console.log("ignore")
return
}
let newId
if (e.target.classList.contains("anchor")) {
// Handle resize anchors
newId = e.target.dataset.id
console.log("anchor", newId)
} else {
// Handle normal components
const element = e.target.closest(".interactive.component")
newId = element?.dataset?.id
console.log("normal", newId)
}
if (newId !== componentId) {

View file

@ -34,8 +34,9 @@
return false
}
// Check if we're a descendent of a grid
return domNode?.closest(".grid") != null
return component?.parentNode
?.closest?.(".component")
?.childNodes[0]?.classList.contains("grid")
}
const createIntersectionCallback = idx => entries => {