JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<div id="log" style="position:absolute;top:10px;left:10px;"> Hi</div>
      <div id="mymap" style="width: 300px;height:400px;border:1px solid #c0c0c0; background-color:blue">
      </div>  
 <script src="https://hammerjs.github.io/dist/hammer.js"></script>

JavaScript

var map = document.getElementById('mymap');
var mc = new Hammer.Manager(map);

var pan1p = new Hammer.Pan({
  event: 'pan1p',
  direction: Hammer.DIRECTION_ALL,
  pointers: 1,
  preventDefault: true});
var pan2p = new Hammer.Pan({
  event: 'pan2p',
  direction: Hammer.DIRECTION_ALL,
  pointers: 2,
  preventDefault: true});
pan2p.recognizeWith(pan1p);
pan1p.requireFailure(pan2p);
mc.add([pan1p, pan2p]);
mc.on('pan1p', function(ev) {
  var log = document.getElementById('log');
  log.innerHTML = 'pan1p: ' + JSON.stringify(ev);
 console.log(ev);
});
mc.on('pan2p', function(ev) {
  var log = document.getElementById('log');
  log.innerHTML = 'pan2p: ' + JSON.stringify(ev);
});
mc.on('pan1pstart', function(ev) {
  var log = document.getElementById('log');
  log.innerHTML =  'pan1pstart: '+JSON.stringify(ev);
  var x1 = ev.pan1p.pointers[0].pageX;
   var y1 = ev.pan1p.pointers[0].pageY;
    console.log(x1);
    console.log(y1);
  
});