拖拽排序问题：hover 样式卡住怎么办？

前端

2022-11-18 03:06:11

拖拽排序：解决悬停样式卡住问题和优化性能

在开发网络应用程序时，拖拽排序功能是一个常见的需求，但它也会带来一些挑战，例如悬停样式卡住的问题。本文将探讨这一问题，并提供解决方法和优化拖拽排序性能的技巧。

拖拽排序悬停样式卡住问题

在拖拽排序列表中，为列表项设置悬停样式是为了提示用户可以拖动该项。然而，当用户开始拖动时，悬停样式有时会卡住，停留在列表项上。这可能是由于以下原因造成的：

CSS 样式清除不当： 悬停样式可能没有在 CSS 中被正确清除，导致其在拖动期间仍显示。
JavaScript 事件处理错误： 未在 JavaScript 代码中正确处理 dragstart 和 dragend 事件，导致悬停样式无法移除。
拖拽排序库实现问题： 所使用的拖拽排序库的实现可能存在缺陷，导致悬停样式卡住。

解决悬停样式卡住问题

要解决悬停样式卡住问题，可以采取以下步骤：

正确清除 CSS 悬停样式： 为正在拖动的列表项添加一个类，并使用该类覆盖悬停样式，使其消失。
移除 JavaScript 事件处理中的悬停样式： 在 dragstart 和 dragend 事件监听器中移除悬停样式。
选择一个可靠的拖拽排序库： 确保所选的拖拽排序库实现良好，不会导致悬停样式卡住。

示例代码：

.list-item:hover {
  background-color: #efefef;
}

.list-item.dragged {
  background-color: transparent;
}

const listItem = document.querySelector('.list-item');

listItem.addEventListener('dragstart', (event) => {
  listItem.classList.remove('hover');
});

listItem.addEventListener('dragend', (event) => {
  listItem.classList.remove('hover');
});

优化拖拽排序性能

除了解决悬停样式卡住问题外，还可以通过以下技巧优化拖拽排序性能：