JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cont">
		<div id="slide"></div>
	</div>

CSS

#cont{
		width: 200px;
		height: 400px;
		position: relative;
		border: solid 1px;
	}

	#slide{
		width: 100px;
		height: 200px;
		background: black;
		position: absolute;
		left:0;
		right: 0;
		margin: 0 auto;
		cursor: pointer;
	}

JavaScript

(function(){
	var project = {
		dragging: false,
		xCordinateDown: null,
		yCordinateDown: null,
		init:function(){
			var swipeObject = document.getElementById('slide');
			swipeObject.addEventListener('mousedown', this.taped);
			swipeObject.addEventListener('mouseup', this.tapedOut);
			swipeObject.addEventListener('mouseleave', this.tapedOut);
			swipeObject.addEventListener('mousemove', this.swiped);
		},
		taped:function(e){
			this.dragging = true;
			this.xCordinateDown = e.clientX;
			this.yCordinateDown = e.clientY;
		},
		tapedOut:function(){
			this.dragging = false;
			this.xCordinateDown = null;
			this.yCordinateDown = null;
			document.getElementById("slide").style.top = 0;
		},
		swiped:function(e){
			if(this.dragging){
				var xCordinate = e.clientX;
				var yCordinate = e.clientY;

				var xDifference = this.xCordinateDown - xCordinate;
	    		var yDifference = this.yCordinateDown - yCordinate;

	    		if(Math.abs(xDifference) < Math.abs(yDifference)){
				    if(yDifference < 0){
				 
				    	document.getElementById("slide").style.top = Math.abs(yDifference) + 'px';
				    }                     
				}
			}
		}
	}
	project.init();
})();