简单的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
<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>
</html>