主页 / user-7802839

FakeEmpire's questions

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

当可拖动元素悬停在 上的列上时，我想在目标表列周围应用虚线边框dragenter，并删除 上的边框dragleave。

我能够成功定位并设置这些表格列的样式，但是边框会快速应用/移除，从而产生“闪烁”效果。有什么方法可以添加特定的检查，使列之间的拖动过渡更加平滑，并避免不必要地执行这些事件监听器/样式应用和移除操作吗？

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

JsFiddle链接：https://jsfiddle.net/z8mkdj3y/26/

javascript