思路:1、拖拽原理:距离不变(拖拽过程中,鼠标到div的left和top值不变)。
2、三个步骤:mousedown:存储距离;mousemove:根据距离,计算div最新的位置;mouseup:关闭拖动和抬起的行为。
3、mousedown时加上return false;防止火狐下出现的bug;
4、div要设置绝对位置position:absolute,才可以拖动。
5、move和up的时候,要在document上操作,防止鼠标滑出div的情况。
$(function(){
var disX=0;
var disY=0;
$("#aaa").mousedown(function(ev){
disX=ev.pageX-$("#aaa").offset().left;
disY=ev.pageY-$("#aaa").offset().top;
$(document).mousemove(function(ev){
$("#aaa").css("left",ev.pageX-disX);
$("#aaa").css("top",ev.pageY-disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});