<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.2.1.min.js"></script>
<style>
#a1{
position: absolute;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;background: #000" id="a1"></div>
<!--<div style="width: 50px;height: 50px;border: 1px solid #000;cursor: move" id="d2"></div>-->
<script>
function drag() {
var obj = $('#a1');
obj.bind('mousedown', start);
function start(e) {
var ol = obj.offset().left;
var ot = obj.offset().top;
deltaX = e.pageX - ol;
deltaY = e.pageY - ot;
$(document).bind({
'mousemove': move,
'mouseup': stop
});
return false;
}
function move(e) {
obj.css({
"left": (e.pageX - deltaX),
"top": (e.pageY - deltaY)
});
return false;
}
function stop() {
$(document).unbind({
'mousemove': move,
'mouseup': stop
});
}
}
drag();
</script>
</body>
</html>