Anwendung im sanften Stil auf Zielelement in Dragenter und Dragleave ⇐ CSS

[Anonymous]

Ich möchte einen gestrichelten Rand um meine Zieltabellenspalten anwenden, wenn ein draggierbares Element über die Spalte auf Dragenter schwebt und den Rand auf Dragleave . Gibt es eine Möglichkeit, eine bestimmte Prüfung hinzuzufügen, um diesen Dragübergang zwischen den Spalten reibungsloser zu machen und diese Ereignishörer/Stilanwendung zu vermeiden, und das Entfernen von unnötig ausgeführt werden?
Drop item




Cell-1
Cell-2


Cell-3
Cell-4



< /code>
const tds = document.querySelectorAll("[data-column-number]")

for (let td of tds) {
td.addEventListener("dragenter", (event) => {
let colNum = td.dataset.columnNumber
let cols = document.querySelectorAll(`[data-column-number="${colNum}"]`)

console.log("")

for (let col of cols) {
col.classList.add("hovered")
}
})

td.addEventListener("dragleave", (event) => {
let colNum = td.dataset.columnNumber
let cols = document.querySelectorAll(`[data-column-number="${colNum}"]`)

console.log("")

for (let col of cols) {
col.classList.remove("hovered")
}
})
}
< /code>
div {
border: dotted 2px green;
width: 70px;
background-color: yellow;
text-align: center;
cursor: grab;
}

div:active {
cursor: grabbing;
}

td.hovered {
border: dashed 2px red;
}

table {
margin-top: 30px;
}
< /code>
JsFiddle Link: https://jsfiddle.net/z8mkdj3y/26/