JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="helicopter"></div>
</div>

CSS

#wrapper{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:100%;
    height:100%;
    
}

#helicopter{
    position:absolute;
    top:30%;
    left:20%;
    width:40px;
    height:40px;
    background-color:#000;
    -webkit-transform:translate3d(0,0,0);
}

JavaScript

var $helicopter = $('#helicopter');
var $body = $('#wrapper');
var fly;
var fall;

var speed  = 1;

function copter_touchstart(){
    clearInterval(fall);
    fly = setInterval( start_fly, 2);
}

function copter_touchend(){
    clearInterval(fly);
    fall = setInterval( start_fall, 2);
}

function start_fly(){
    var matrix = $helicopter.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
    var y = matrix[5];
    var new_top = parseInt(y) - speed;

    $helicopter.css('-webkit-transform', 'translate3d(0, '+ new_top +'px, 0)')
}

function start_fall(){
    var matrix = $helicopter.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',');
    var y = matrix[5];
    var new_top = parseInt(y) + speed;

    $helicopter.css('-webkit-transform', 'translate3d(0, '+ new_top +'px, 0)')
}

$body.on('mousedown', copter_touchstart).on('mouseup', copter_touchend);