JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<h3>swipe</h3>
<div id="red" class="colorContainer">
    <div class="color redColor"></div>
</div>

<h3>drag</h3>
<div id="blue" 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(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'hammerjs'], factory);
    } else if (typeof exports === 'object') {
        factory(require('jquery'), require('hammerjs'));
    } else {
        factory(jQuery, Hammer);
    }
}(function($, Hammer) {
    function hammerify(el, options) {
        var $el = $(el);
        if(!$el.data("hammer")) {
            $el.data("hammer", new Hammer($el[0], options));
        }
    }

    $.fn.hammer = function(options) {
        return this.each(function() {
            hammerify(this, options);
        });
    };

    // extend the emit method to also trigger jQuery events
    Hammer.Manager.prototype.emit = (function(originalEmit) {
        return function(type, data) {
            originalEmit.call(this, type, data);
            $(this.element).trigger({
                type: type,
                gesture: data
            });
        };
    })(Hammer.Manager.prototype.emit);
}));





var red = $( '#red' ),
        blue = $( '#blue' );
    
    //jquery.hammer.js
    // $(red).hammer().on("swipe", function(event) {
    //     if(event.gesture.direction === "right") {
    //         $(this).find(".color").animate({left: "+=100"}, 500);
    //     } else if(event.gesture.direction === "left") {
    //         $(this).find(".color").animate({left: "-=100"}, 500);
    //     }
    //     $("#event").text(event.gesture.direction);
    // });
    
    //hammer.js
    
    //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
    Hammer(blue).on("dragleft", function() {
        $(this).find(".color").animate({left: "-=100"}, 500);
        $("#event").text("drag left");
    });
    
   ...