Question

我正在尝试使用触摸和鼠标事件进行非原生拖放。

我正在采取的方法是克隆拖动源并移动克隆。所有事件都附在文档中。克隆使用pointer-events: none应用CSS，以允许克隆下的元素计为mousemove或touchmove事件的事件目标，而不是克隆本身。

这适用于所有桌面浏览器（鼠标），但在使用单点触摸在ipad上进行测试时似乎没有任何效果 - 即克隆始终显示为事件目标。我已经尝试过相当数量的搜索，这让我相信这是可能的，但我没有看到任何结论。

如果克隆元素有帮助，则它具有以下CSS：

.mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 999999 !important;
    opacity: 0.8;
    pointer-events: none !important;
}

谢谢！

Answer 1

原来pointer-events: none可以使用触控指针，但方式不一样。我永远无法可靠地使用event.target来表示触摸指针下方的项目，就像它对鼠标事件一样。

在上面提到的pointer-events: none元素上放置.mirror确实有用，但我必须使用document.elementFromPoint和事件坐标来获取基础元素。似乎性能较差且不太优雅，但它的性能没有明显下降。

document.elementFromPoint的一个问题是，如果您所在的元素位于iframe中，则会返回iframe元素。然后，您必须获取iframe的文档并在其上调用elementFromPoint（考虑iframe的左侧和顶部偏移量）。

这可能看起来像混乱，但我希望其他人觉得它有用。

拖放 - 使用指针事件触摸元素：无

1 个答案: