我正在创建一个包含可排序表的拖放系统,并且我试图在元素列表上悬停时复制jQuery的insertBefore/insertAfter
行为。因此,我的光标下有一个元素,我想在它显示在列表中的位置放置一个占位符。
我试过:
-
document.elementFromPoint
-这只给我最上面的元素 -
document.querySelectorAll(':hover')
-这给了我包含列表和拖动元素,但不是中间元素,我将在 之前/之后插入占位符 - 检查
event.toElement, .srcElement
等 - 设置
pointer-events: none
上拖动的元素-这似乎只是从document.querySelectorAll ":hover"
列表中删除它
我想避免搜索列表中的所有项来查看我的鼠标光标是否在它们的边界内,因为我怀疑这会对性能造成巨大的影响。
使用document.elementFromPoint
.
你需要一个显示列表和一个元素列表。
对于每个元素:(1)将显示字符串保存到列表中,(2)将display设置为none,(3)将该元素添加到列表中,(4)再次在该点检查元素。
然后,以相反的顺序遍历元素列表,并将显示设置回原来的位置