0

I'm working on custom drag and drop module to Vue and I found a problem. To override browser D&D (because I need) on pointer down I'm cloning div which I want to drag and then trigger pointermove (on this event, I'm setting X and Y on cloned div), when I fire pointer up, the value of this div is transferred to drag place. To target element under cloned(dragged) div on pointer up event, I used a css property pointer-events: none (on cloned div) and everything is fine on the desktop. On mobile, event targeting always dragged element.

There is console.log from triggered events: logged events

bboysokol
  • 21
  • 1
  • 3
  • Did you try `stopPropagation()` on the drag handler? It would also help to help you, if you'd provided some code. – Teemu Nov 28 '19 at 08:56
  • Yes, i tried it. There is sample https://jsfiddle.net/tLv3wzb8/23/ Keep in mind, this is just not working 100% sample. Passing values in this sample is not important, i need to focus just on triggering events on mobile. Look in dev console – bboysokol Nov 28 '19 at 09:50

2 Answers2

4

Modern mobile browsers use the 'touch-action' CSS property instead. You can read all about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Just add touch-action: none; to the same element you added pointer-events: none; to.

Otherwise, depending on how you set up your vue component, you may need to listen for the 'touchstart' and 'touchend' events and cancel them: 

<TargetElement>.addEventListener( 'touchstart', e => e.preventDefault )
Jack Van der bilt
  • 51
  • 5
1

I found answer to my question in another question: How to find out the actual event.target of touchmove javascript event?

We can target element under our event by

document.elementFromPoint(
    e.clientX,
    e.clientY
);
Layhout
  • 1,445
  • 1
  • 3
  • 16
bboysokol
  • 21
  • 1
  • 3