I have requirement for pan with one pointer and more than one pointers. One pointer to draw on map and more than one to drag the map.
After creating the custom pan gestures I am not able to trigger the native pan events like panstart
or panend
. How could I get native events triggered separately for both custom gestures.
Here is my code HTML:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en'>
<head>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
</head>
<body>
<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 type="text/javascript" src="./js/build.js"></script>
</body>
</html>
Here is my JavaScript code:
var Hammer = require('hammerjs');
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);
});
mc.on('pan2p', function(ev) {
var log = document.getElementById('log');
log.innerHTML = 'pan2p: ' + JSON.stringify(ev);
});
mc.on('panstart', function(ev) {
var log = document.getElementById('log');
log.innerHTML = 'panstart: '+JSON.stringify(ev);
});
It has to be pan1pstart
as original event pan
has been named as pan1p
mc.on('panstart', function(ev) {
var log = document.getElementById('log');
log.innerHTML = 'panstart: '+JSON.stringify(ev);
});
got clarification from hammer.js repository