<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
.circle{ 100px; height: 100px; background: red; position: absolute; border-radius:50px;}
</style>
<script src='../jquery-3.1.1.min.js'></script>
<script>
$(function(){
var disX=0;
var disY=0;
$('div').mousedown(function(ev){
disX=ev.pageX-$(this).offset().left;
disY=ev.pageY-$(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left', ev.pageX-disX);
$('div').css('top', ev.pageY-disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});
</script>
</head>
<body>
<div class="circle">
</div>
</body>
</html>