[英]drag and drop - touch through element using pointer-events: none
I'm experimenting with non-native drag and drop using touch and mouse events. 我正在尝试使用触摸和鼠标事件进行非本地拖放。
The approach I'm taking is to clone the drag source and move the clone. 我采用的方法是克隆拖动源并移动克隆。 All events are attached to the document. 所有事件均附在文档中。 The clone gets CSS applied of pointer-events: none
to allow the element under the clone to count as the event target of a mousemove
or touchmove
event rather than the clone itself. 克隆将CSS pointer-events: none
应用于CSS pointer-events: none
可让克隆下的元素算作mousemove
或touchmove
事件的事件目标,而不是克隆本身。
This works great in all desktop browsers (mouse) but does not seem to have any effect when testing on an ipad using single touch - that is the clone always shows as the event target. 这在所有台式机浏览器(鼠标)上都很好用,但是在使用单点触摸的ipad上进行测试时似乎没有任何效果-这就是克隆始终显示为事件目标。 I've tried searching a fair amount, and it leads me to believe it's possible but I've seen nothing conclusive. 我尝试搜索相当多的内容,这使我相信这是可能的,但是我没有发现任何结论。
A cloned element has the following CSS if it helps: 如果克隆的元素有帮助,则具有以下CSS:
.mirror {
position: fixed !important;
margin: 0 !important;
z-index: 999999 !important;
opacity: 0.8;
pointer-events: none !important;
}
Thanks! 谢谢!
Turns out pointer-events: none
does work with touch pointers, just not in the same way. 产生pointer-events: none
触摸指针指针不能工作,只是不能完全相同。 I could never reliably get event.target
to represent the item underneath the touch pointer the way it does with mouse events. 我永远无法可靠地获取event.target
来表示触摸指针下方的项目,就像鼠标事件一样。
Placing pointer-events: none
on the .mirror
element mentioned above does work, but I had to use document.elementFromPoint
with the event coordinates to get the underlying element. 放置pointer-events: none
上面提到的.mirror
元素上没有任何作用,但是我不得不将document.elementFromPoint
与事件坐标一起使用来获取基础元素。 Seems less performant and less elegant but it works with no noticeable drop in performance. 似乎性能较低且较不优雅,但是在性能上没有明显下降。
One gotcha with document.elementFromPoint
is that if the element you are over is within an iframe you will get the iframe element back. 与document.elementFromPoint
一个陷阱是,如果您位于上方的元素在iframe中,则将iframe元素取回。 You then have to get the iframe's document and call elementFromPoint
on that (accounting for the left and top offsets of the iframe). 然后,您必须获取iframe的文档,并在该文档上调用elementFromPoint
(考虑iframe的左右偏移量)。
This all probably looks like a jumbled mess, but I hope someone else finds it helpful. 这一切看起来都像是一团混乱,但我希望其他人会觉得有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.