JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

CSS

body { margin: 0; position: absolute; width: 100%; height: 100%; }
div { width: 100%; height: 20%; }
#a { background-color: rgb(0,50,0); }
#b { background-color: rgb(0,100,0); }
#c { background-color: rgb(0,150,0); }
#d { background-color: rgb(0,200,0); }

JavaScript

var start = 0,
    target = null;

window.addEventListener('mousedown', function (e) {
    start = e.clientX;
    target = e.target;
});

window.addEventListener('mousemove', function (e) {
    if (target) {
        var dist = e.clientX - start;
        if (Math.abs(dist) > 100) {
            var ce = new CustomEvent('swipe', {
                detail: {
                    direction: dist > 0 ? 'right' : 'left'
                }
            });
            target.dispatchEvent(ce);
            start = 0;
            target = null;
        }
    }
});

window.addEventListener('mouseup', function (e) {
    start = 0;
    target = null;
});

var handle = function (e) {
    console.log('SWIPE', e.target, e.detail.direction);
    console.log(e);
};
var divs = document.getElementsByTagName('div');
Array.prototype.forEach.call(divs, function (div) {
    div.addEventListener('swipe', handle);
});
document.body.addEventListener('swipe', handle);