拖拽

思路: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;
});
});

posted @ 2016-09-09 17:33  2350305682  阅读(168)  评论(0编辑  收藏  举报