• 拖拽


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

  • 相关阅读:
    ORACLE同义词
    eclipse如何检出项目的jar包
    2020-04-03
    十大经典排序算法
    2020-03-30
    world文档设置表格自定义序列
    2020面试记录
    java如何用一个循环实现两个有序数组合并成一个有序数组
    2020-1-8
    好物推荐之抽纸
  • 原文地址:https://www.cnblogs.com/annie211/p/5857483.html
Copyright © 2020-2023  润新知