HTML:
<body>
<div id="k"></div>
</body>
CSS:
#k {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
background: green;
}
JS:
const object = document.querySelector('#k');
object.onmousedown = function(event) {
let shiftY = event.clientY - object.getBoundingClientRect().height;
object.style.zIndex = 1000;
document.body.append(object);
moveAt(event.pageY);
function moveAt(pageY) {
object.style.height = shiftY - pageY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageY);
}
document.addEventListener('mousemove', onMouseMove);
object.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
object.onmouseup = null;
};
};
object.ondragstart = function() {
return false;
};
Как-то так