JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer-time.min.js"></script>
<div id="pan">
teste
</div>

CSS

#pan {
  width: 400px;
  height: 300px;
  background-color: black;
  color: white;
  margin: 20px;
}

JavaScript

//Swipe
Hammer(document.getElementById("pan")).on("pan", function(e) {
	var pos = Math.min(Math.max(e.center.x - $(e.target).offset().left, 0), $(e.target).width());
    console.log(pos);
});