Início / user-7802839

FakeEmpire's questions

Martin Hope
FakeEmpire
Asked: 2025-04-09 06:47:11 +0800 CST
  • 5

Gostaria de aplicar uma borda tracejada ao redor das colunas da minha tabela de destino quando um elemento arrastável for passado sobre a coluna em dragenter, e remover a borda em dragleave.

Consigo direcionar e estilizar essas colunas da tabela com sucesso, porém há um efeito de "piscada" em que a borda é aplicada/removida rapidamente. Existe alguma maneira de adicionar uma verificação específica para tornar essa transição de arrastar entre colunas mais suave e evitar que esses ouvintes de eventos/aplicação e remoção de estilo sejam executados desnecessariamente?

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

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("<-- drag enter --->")

    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("<-- drag leave --->")

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

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

Link do JsFiddle: https://jsfiddle.net/z8mkdj3y/26/

javascript