<html>
<head>
<style>
*{margin:0;padding:0}
div{width:100px;height:100px;background:red;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var movediv=function(){$(document).mousedown(function(x){
$("div").mousemove(function(e,x){
$("div").css('margin-left',e.pageX-50);
$("div").css('margin-top',e.pageY-50);
});
$("div").mouseup(function(e){
$("div").unbind( 'mousemove' );
});
});};movediv();
});
</script>
</head>
<body>
<p>鼠标指针位于： <span></span></p>
<div></div>
</body>
</html>
<head>
<style>
*{margin:0;padding:0}
div{width:100px;height:100px;background:red;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var movediv=function(){$(document).mousedown(function(x){
$("div").mousemove(function(e,x){
$("div").css('margin-left',e.pageX-50);
$("div").css('margin-top',e.pageY-50);
});
$("div").mouseup(function(e){
$("div").unbind( 'mousemove' );
});
});};movediv();
});
</script>
</head>
<body>
<p>鼠标指针位于： <span></span></p>
<div></div>
</body>
</html>