<!DOCTYPE html>
<html>
<head>
<title>Removable Square</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.square {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square:hover {
cursor: move;
}
</style>
</head>
<body>
<div class="square"></div>
<a href="index.html">This is the code</a>
<script>
$(document).ready(function() {
var square = $(".square");
square.mousedown(function(event) {
var startX = event.pageX;
var startY = event.pageY;
$(document).mousemove(function(event) {
var deltaX = event.pageX - startX;
var deltaY = event.pageY - startY;
square.css("left", square.offset().left + deltaX);
square.css("top", square.offset().top + deltaY);
});
});
});
</script>
</body>
</html>