基本思路:1.首先需要鼠标按下拖动区域,也就是需要调用mousedown方法
2.鼠标移动,需要拖动的元素跟着鼠标移动,调用mousemove方法
3.鼠标弹起拖动消失,调用mouseup方法
#a1{
width:25px;
height:25px;
background:#a6e22e;
cursor:pointer;
position:absolute;
left:0;
top:0;
}
<div id="a1">
</div>
$(function(){
$('#a1').mousedown(function(e){
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function(e){
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if(x<0){
x=0;
}else if(x>$(document).width()-$('#a1').outerWidth(true)){
x = $(document).width()-$('#a1').outerWidth(true);
}
if(y<0){
y=0;
}else if(y>$(document).height()-$('#a1').outerHeight(true)){
y = $(document).height()-$('#a1').outerHeight(true);
}
$('#a1').css({
'left':x+'px',
'top':y+'px'
});
});
$(document).mouseup(function(){
$(document).off('mousemove');
});
});
});