JSFiddle - React, Tailwind, and code Playground

by Vojtech Mares

HTML

<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<div id="myElement" class="circleBase" ></div>

CSS

.circleBase {
   border-radius: 50%;  
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}

JavaScript

var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright panup pandown tap press", function(ev) {
    myElement.textContent = ev.type;
});