JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<script src="http://eightmedia.github.io/hammer.js/dist/jquery.hammer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<h3>swipe</h3>
<div id="red" class="colorContainer">
    <div class="color redColor"></div>
</div>


<h2 id="event"></h2>

CSS

body {
    overflow:hidden;
    height: 100%;
}
.colorContainer {
    position: relative;
    padding:0 200px;
    width: 100%;
    border: 1px solid;
    margin-top: 25px;
}
.color{
    position: relative;
    left: 100px;
	width:100px;
    height:100px;
	cursor:pointer;
}
#red .color {
    background: red;
}

#blue .color {
    background: blue;
}

JavaScript

$(function(){  
    var red = document.getElementById("red")
    
 
    //Swipe
    Hammer(red).on("swipeleft", function() {
        $(this).find(".color").animate({left: "-=100"}, 500);
        $("#event").text("swipe left");
    });
    
    Hammer(red).on("swiperight", function() {
        $(this).find(".color").animate({left: "+=100"}, 500);
        $("#event").text("swipe right");
    });
    
    // Drag
 
});