JSFiddle - React, Tailwind, and code Playground

by Abhishek Kumar

HTML

<div id="container">
    <div id="box" class="unselectable drag-down bounce-back-up"></div>
</div>

CSS

.drag-down {
}
.bounce-back-up {
}
#container {
    width:300px;
    height:300px;
    background-color:lightgrey;
}
#box {
    width:90%;
    height:300px;
    background-color:indianred;
    margin: 0 5% 0 5%;
    color: black;
}
body {
    margin: 0 0 0 0;
}
*.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

(function () {
    var g = $.support.touch,
        scrollEvent = "touchmove scroll",
        touchStartEvent = g ? "touchstart" : "mousedown",
        touchStopEvent = g ? "touchend" : "mouseup",
        touchMoveEvent = g ? "touchmove" : "mousemove";
    $.event.special.swipeupdown = {
        setup: function () {
            var e = this;
            var f = $(e);
            f.bind(touchStartEvent, function (c) {
                var d = c.originalEvent.touches ? c.originalEvent.touches[0] : c,
                    start = {
                        time: (new Date).getTime(),
                        coords: [d.pageX, d.pageY],
                        origin: $(c.target)
                    }, stop;

                function moveHandler(a) {
                    if (!start) {
                        return
                    }
                    var b = a.originalEvent.touches ? a.originalEvent.touches[0] : a;
                    stop = {
                        time: (new Date).getTime(),
                        coords: [b.pageX, b.pageY]
                    };
                    if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                        a.preventDefault()
                    }
                }
                f.bind(touchMoveEvent, moveHandler).one(touchStopEvent, function (a) {
                    f.unbind(touchMoveEvent, moveHandler);
                    if (start && stop) {
                        if (stop.time - start.time < 1000 && Math.abs(start.coords[1] - stop.coords[1]) > 30 && Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                            start.origin.trigger("swipeupdown").trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown")
                        }
                    }
                    start = stop = undefined
                })
            })
        }
    };
    $.each({
        swipedown: "swipeupdown",
        swipeup: "swipeupdown"
    }, function (b, c) {
        $.event.special[b] =...