Yes you can, see the below code it should allow your picture to be dragged, transformed, tapped, etc. The multitouch and fake gesture should be visible as well.
I have tested the code below in IE 10 AND 11
Code:
<body id="bodyElement">
<div id="container">
<img id="small" src="http://1800recycling.com/wp-content/uploads/2010/06/mona-lisa-lego1.jpg" width="40px" height="40px"/>
<div id="wrapper">
<img id="large" src="http://1800recycling.com/wp-content/uploads/2010/06/mona-lisa-lego1.jpg" alt="Colefax Classics" />
<p id="coordinates"></p>
</div>
</div>
<script src="hammer.fakemultitouch.js" type="text/javascript"></script>
<script src="hammer.showtouches.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(ev){
var isOpen = false;
var posX, posY,
lastPosX, lastPosY,
bufferX, bufferY,
scale, last_scale, dragReady=0;
var t;
var lastX;
var lastY;
var elemRect = document.getElementById('large');
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
//displays touch events
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
var hammer = Hammer(bodyElement, {
transform_always_block: true,
transform_min_scale: 1,
drag_block_horizontal: true,
drag_block_vertical: true,
drag_min_distance: 0,
preventDefault: true
});
function SetDefaultImagePosition() {
posX=0, posY=0,
lastPosX=0, lastPosY=0,
bufferX=0, bufferY=0,
scale=1, last_scale, dragReady=0;
}
hammer.on('tap touch drag transform transformend dragstart dragend', function(ev) {
ev.gesture.preventDefault();
manageMultitouch(ev);
});
function manageMultitouch(ev) {
switch(ev.type) {
case 'tap' :
if(isOpen === false) {
$('#large').show();
isOpen = true;
} else {
$('#large').hide();
isOpen = false;
}
SetDefaultImagePosition();
break;
case 'touch' :
last_scale = scale;
break;
case 'drag' :
if(t){
if (typeof lastX === 'undefined' && typeof lastY === 'undefined'){
lastX = 0;
lastY = 0;
}
if(scale > 1) {
posX = (ev.gesture.deltaX + lastX * scale)/scale;//This is another workaround for the multiple drag glicth
posY = (ev.gesture.deltaY + lastY * scale)/scale;
} else {
posX = (ev.gesture.deltaX + lastX)/scale;//This is another workaround for the multiple drag glicth
posY = (ev.gesture.deltaY + lastY)/scale;
}
}
break;
case 'transform' :
scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 3));
t=false;
break;
case 'dragend' :
if(t){
lastX = posX;
lastY = posY;
} else {
t = true;
}
break;
}
transform = "scale3d("+scale+","+scale+", 1) " +
"translate3d("+posX+"px,"+posY+"px, 0) ";
requestAnimationFrame(function() {
elemRect.style.transform = transform;
elemRect.style.oTransform = transform;
elemRect.style.msTransform = transform;
elemRect.style.mozTransform = transform;
elemRect.style.webkitTransform = transform;
});
}
});
</script>
</body>
in the head all you have to add is a reference to hammer.min.js.