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;
    });
    });

  • 相关阅读:
    MGR
    复制参数优化
    mysql复制
    sysbench
    mysql 用户及权限
    MySQL多实例安装
    PHP常用数组函数
    AJAX传递数据的两种编码x-www-form-urlencoded与json的区别
    使用PHP操作文件
    var_dump和var_export区别
  • 原文地址:https://www.cnblogs.com/annie211/p/5857483.html
Copyright © 2011-2022 走看看