Create a table with two cells

HTML

<div draggable="true">Drop item</div>

<table>
  <tbody>
    <tr>
      <td class="cell" data-column-number="1">Cell-1</td>
      <td class="cell" data-column-number="2">Cell-2</td>
    </tr>
    <tr>
      <td class="cell" data-column-number="1">Cell-3</td>
      <td class="cell" data-column-number="2">Cell-4</td>
    </tr>
  </tbody>
</table>

CSS

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;
}

JavaScript

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}"]`)

    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}"]`)

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