JSFiddle - React, Tailwind, and code Playground

by elijah123467

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div id="blue"></div>

CSS

#blue {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: blue;
  cursor: pointer;
  right:
}

JavaScript

$(function() {
  var blue = document.getElementById("blue");

  var hammertimeLeft = new Hammer.Manager(blue, {
    recognizers: [
      [Hammer.Swipe, {
        direction: Hammer.DIRECTION_LEFT
      }]
    ]
  });
  hammertimeLeft.on("swipe", function(ev) {
    $(blue).animate({
      left: "-=100"
    }, 500)
  });

  var hammertimeRight = new Hammer.Manager(blue, {
    recognizers: [
      [Hammer.Swipe, {
        direction: Hammer.DIRECTION_RIGHT
      }]
    ]
  });
  hammertimeRight.on("swipe", function(ev) {
    $(blue).animate({
      left: "+=100"
    }, 500)
  });
})