mySwipe.js

console.warn('УДАЛИ МЕНЯ!');
;(function () {
    var mySwipe = {
        inWork: false,
        xDown: null,
        yDown: null,
        xStart: null,
        yStart: null,
        event: null,
        currentDirection: null,
        init: function (selector, callback) {
            if (typeof callback === 'function') this.move = callback;
            document.querySelectorAll(selector).forEach(this.eventListener.bind(this));
        },
        eventListener: function (element) {
            element.addEventListener('mousedown', this.handleTouchStart.bind(this), false);
            element.addEventListener('touchstart', this.handleTouchStart.bind(this), false);
            element.addEventListener('mouseup', this.handleTouchEnd.bind(this), false);
            element.addEventListener('touchend', this.handleTouchEnd.bind(this), false);
            element.addEventListener('mousemove', this.handleTouchMove.bind(this), false);
            element.addEventListener('touchmove', this.handleTouchMove.bind(this), false);
        },
        set: function (field, value) {
            this[field] = value;
        },
        get: function (field) {
            return this[field];
        },
        getTouches: function (e) {
            var result = { offsetX: 0, offsetY: 0 };
            var touch = e.touches ? e.touches[0] : e.originalEvent
                ? e.originalEvent.touches[0] : false;
            if (touch) {
                result.offsetX = touch.clientX;
                result.offsetY = touch.clientY;
            } else {
                result.offsetX = e.clientX;
                result.offsetY = e.clientY;
            }
            return result;
        },
        handleTouchStart: function (e) {
            this.inWork = true;
            var touche = this.getTouches(e);
            this.set('xDown', touche.offsetX);
            this.set('yDown', touche.offsetY);
            this.set('xStart', touche.offsetX);
            this.set('yStart', touche.offsetY);
        },
        handleTouchEnd: function () {
            this.inWork = false;
        },
        handleTouchMove: function (e) {
            if (!this.inWork) return false;

            var touche = this.getTouches(e);
            var xUp = touche.offsetX;
            var yUp = touche.offsetY;

            this.move(e, xUp, yUp, xUp-this.get('xStart'), yUp-this.get('yStart'));

            if (!this.get('xDown') || !this.get('yDown')) return false;

            var xDiff = this.get('xDown') - xUp;
            var yDiff = this.get('yDown') - yUp;

            if (Math.abs(xDiff) > Math.abs(yDiff)) {
                if (xDiff > 0) {
                    this.leftSwipe();
                } else {
                    this.rightSwipe();
                }
            } else {
                if (yDiff > 0) {
                    this.upSwipe();
                } else {
                    this.downSwipe();
                }
            }
            this.set('xDown', null);
            this.set('yDown', null);
        },
        preventDefault: function (e) {
            if (e.type === 'touchmove') {
                e.stopImmediatePropagation();
            } else {
                e.preventDefault();
            }
        },
        leftSwipe: function () {
            this.set('currentDirection', 'left');
        },
        rightSwipe: function () {
            this.set('currentDirection', 'right');
        },
        upSwipe: function () {
            this.set('currentDirection', 'up');
        },
        downSwipe: function () {
            this.set('currentDirection', 'down');
        },
        // действие по умолчанию, если не передан callback
        move: function (e, currentX, currentY, diffX, diffY) {
            this.preventDefault(e);
            e.target.style.transition = 'none';
            e.target.style.transform =  `translate(${diffX}px, ${diffY}px)`;
        },
    };
    document.addEventListener('DOMContentLoaded', function () {
        window.mySwipe = function (selector, callback) {
            if (selector) {
                mySwipe.init(selector, callback);
            }
        };
    });
})();

// пример
document.addEventListener('DOMContentLoaded', function () {
    mySwipe('.btn-transparent-dark-gray', function (e, currentX, currentY, diffX, diffY) {
        console.log(e, currentX, currentY, diffX, diffY, this);
    });
});