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

【问题标题】：drag and drop - touch through element using pointer-events: none拖放 - 使用指针事件触摸元素：无
【发布时间】：2017-04-01 16:11:08
【问题描述】：

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

我正在采取的方法是克隆拖动源并移动克隆。所有事件都附加到文档中。克隆应用了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;
}

谢谢！

【问题讨论】：

标签： javascript css drag-and-drop

【解决方案1】：

原来pointer-events: none 确实适用于触摸指针，只是方式不同。我永远无法像处理鼠标事件那样可靠地让event.target 代表触摸指针下方的项目。

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

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

这一切可能看起来很混乱，但我希望其他人会觉得它有帮助。

【讨论】：