title: Distinguish between touch only and mouse-and-touch devices
body: <p>Right now, I am working on a part of a project which supports drag and drop. Look at the picture for clarification:</p>
  
  <p><img src="https://i.imgur.com/rXsuY3e.png" alt="picture"></p>
  
  <p>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.</p>
  
  <p>On mobile devices, I just removed the drag and drop and the gray areas and can add the blue boxes by clicking on them.</p>
  
  <p>Now for the actual problem: in order to detect touch, I used the following javascript method I dug up somewhere on StackOverflow:</p>
  
  <pre><code>if (window.matchMedia("(any-pointer: coarse)").matches) {
      vm.touchScreen = true;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Therefore, I am looking for something like that:</p>
  
  <pre><code>getInputType=function(){
      if(somecheck1)return 1;/Touch only
      if(somecheck2)return 2;//Mouse only
      if(somecheck3)return 3;//Mouse and Touch
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I would be glad if somebody could help me or provide me with a link to a proper solution!</p>
  
  <p>Best Regards</p>