CODEWITHSUNDEEP
javascriptcssdrag-and-drop
Brian Scaturro
Brian Scaturro

Reputation: 305

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.

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. 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:

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

Thanks!

Upvotes: 2

Views: 1880

Answers (1)

Brian Scaturro
Brian Scaturro

Reputation: 305

Turns out pointer-events: none does work with touch pointers, just not in the same way. I could never reliably get event.target to represent the item underneath the touch pointer the way it does with mouse events.

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. 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. You then have to get the iframe's document and call elementFromPoint on that (accounting for the left and top offsets of the iframe).

This all probably looks like a jumbled mess, but I hope someone else finds it helpful.

Upvotes: 2

Related Questions