drag&drop dziwne zachowanie

pytanie zadane 5 lutego 2018 w JavaScript przez Kiele Obywatel (1,530 p.)

Na wstępie: nie, nie chcę używać jquery UI zależy mi na tym żeby funkcja była moja. Piszę funkcję przeciągania elementów ale przeciągany element dziwnie się zachowuje gdy wykonuje szybki ruch myszką. Kursor schodzi z elementu i się już nie przeciąga.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="element"></div>
	</div>
	<script src="main.js"></script>
</body>
</html>

body{
	margin:0;
}

.container{
	width:250px;
	height: 250px;
	position: relative;
	display: grid;
	grid-template:100px/100px;
	border:solid 1px;
	top:100px;
	left:100px;
}

.element{
	background: red;
}

.element:hover{
	cursor:move;
}

$(document).ready(function(){
	(function(){
		var container,
		element,
		dragStart,
		drag,
		dragEnd,
		grabX,
		grabY,
		posX,
		posY;

		dragStart = (function(ev){
			element = $(this);
			container = $(this).parent();
			elPos = element.offset();
			cPos = container.offset();
			grabX = ev.clientX-elPos.left;
			grabY = ev.clientY-elPos.top;
		});

		drag = (function(ev){
			if(!element){
				return;
			}
			posX = (ev.clientX-grabX)-cPos.left;
			posY = (ev.clientY-grabY)-cPos.top;
			element.css({"transform":"translate("+posX+"px,"+posY+"px)"});
		});

		dragEnd = (function(){
			element = null;
			posX = null;
			posY = null;
		});

	$(".element").on("mousedown",dragStart);
	$(".element").on("mousemove",drag);
	$(".element").on("mouseup",dragEnd);

	}());
});