Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
	<style type="text/css">
		#re{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		#also{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="drag">drag horizontal</div>
	<div style="width: 400px; height: 300px; background-color: yellow;">
		<span>im stuck</span>
	</div>
	<div id="re"> </div>
	<div id="also"></div>
<script src="jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
	$("#drag").draggable({axis:"x"});
	$("span").draggable({containment:"parent"});
	$("#re").resizable({grid:50, alsoResize:"#also", resize: function(event, ui) {
		if ($("#re").width() > 300) {
			alert("big enaugh");
		}
	}});
</script>
</body>
</html>