jquery 拖拽效果

<script type="text/javascript">
$(function(){
// 给box添加鼠标按下事件
$('.box').mousedown(function(e){
// 获取事件对象
var e = e||window.event;


// 获得起始点鼠标X轴的坐标（浏览器到块鼠标内容之间的距离）
var startX = e.pageX;
// 获得起始点鼠标Y轴的坐标
var startY = e.pageY;
console.log(startX+'|'+startY);
// 获得最开始浏览器到块的top值
var oldTop = $('.box').position().top;
// 获得最开始浏览器到块Left值
var oldLeft= $('.box').position().left;

// 给整个页面添加鼠标移动事件
$(document).mousemove(function(e){

// 获取事件对象
var e = e||window.event;

// 获得结束点X轴的坐标
var endX = e.pageX;
// 获得结束Y轴的坐标
var endY = e.pageY;

// 获得移动距离
// 获得X轴移动的距离
var moveX = endX-startX;
// 获得Y轴的移动距离
var moveY = endY-startY;

// 计算box新Left值和Top值
var NewTop = oldTop+moveY;
var NewLeft = oldLeft+moveX;
// 把新的值赋值给box
$('.box').css({'top':NewTop+'px','left':NewLeft+'px'})
})

})


$('.box').mouseup(function(){
// 清理事件
// 移除谁身上事件.off('移除什么事件')
$(document).off('mousemove');
})


})

</script>

/css/

<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
width: 200px;
height: 200px;
background: deeppink;
position: absolute;
left: 50px;
top: 100px;
}
</style>
///html

<div class="box">

</div>