zoukankan      html  css  js  c++  java
  • 拖拽

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

  • 相关阅读:
    POJ-1182 食物链
    hdu 1879 继续畅通工程
    HDU 2604 Queuing
    hdu 1232 畅通工程
    POJ-1611 The Suspects
    Free DIY Tour
    Tr A
    不容易系列之(3)―― LELE的RPG难题
    W3C标准冒泡、捕获机制
    JavaScript 浏览器事件解读
  • 原文地址:https://www.cnblogs.com/annie211/p/5857483.html
Copyright © 2011-2022 走看看