2

Right now, I am working on a part of a project which supports drag and drop. Look at the picture for clarification:

picture

Even though it is German, I guess it is straightforward: The User can drag the blue boxes from the top saying "Verfügbare Empfänger" on the gray areas below. This works just fine.

On mobile devices, I just removed the drag and drop and the gray areas and can add the blue boxes by clicking on them.

Now for the actual problem: in order to detect touch, I used the following javascript method I dug up somewhere on StackOverflow:

if (window.matchMedia("(any-pointer: coarse)").matches) {
    vm.touchScreen = true;
}

Depending on the value of vm.touchScreen, drag is enabled/disabled. However, one of our customers has a device which supports BOTH touch and mouse. As you can imagine, because touchScreen is set to true in that case, the user cannot use drag and drop even though he has a mouse.

Therefore, I am looking for something like that:

getInputType=function(){
    if(somecheck1)return 1;/Touch only
    if(somecheck2)return 2;//Mouse only
    if(somecheck3)return 3;//Mouse and Touch
}

I actually have a somewhat functional solution already. However, it relies on the user triggering mouseEvents and touchEvents before even displaying the part which I showed you in the image. By triggering either mouse or touch beforehead, two booleans are set: hasMouse and hasTouch. Naturally, this does not work if the user refreshes the page which displays the part with drag and drops right away.

I would be glad if somebody could help me or provide me with a link to a proper solution!

Best Regards

Paras Korat
  • 2,011
  • 2
  • 18
  • 36
Martin Hochmair
  • 231
  • 1
  • 12
  • I am still looking for a solution, this part ist essential for my project! I really would appreciate help or hints. – Martin Hochmair Feb 23 '19 at 12:20
  • 1
    Relevant blog post: [The only way to detect touch with JavaScript](https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685) (David Gilbertson, August 2016). TLDR: don't write extra code just to discriminate against the touch-only or mouse-only users. Enable the same code for them as you already did for the touch-and-mouse users. If they end up not using half of it, that's not a problem. – Quuxplusone Jul 28 '20 at 18:48

1 Answers1

7

Alright, my mistake. I tried a different google search approach and that way, i found the answer:

How to detect if a device has mouse support?

In order to summarize, this is the code I am using:

if (window.matchMedia("(any-pointer: coarse)").matches) {
    hasTouch = true;
}
if (matchMedia('(pointer:fine)').matches) {
    hasMouse = true;
}

This way, you can detect if:

-The device has touch only (hasTouch&&!hasMouse)

-The device has mouse only (!hasTouch&&hasMouse)

-The device has both touch and mouse (hasTouch&&hasMouse)

Martin Hochmair
  • 231
  • 1
  • 12
  • Great answer! Thank you. ...and don't forget to add `var hasTouch = false;` and `var hasMouse = false;` at the beginning. – Dazza Feb 28 '21 at 13:34