• 拖拽改变div宽、高(转)


    $(function () {
      //绑定需要拖拽改变大小的元素对象   
      bindResize(document.getElementById('test'));
    });
    
    function bindResize(el) {
      //初始化参数   
      var els = el.style,
        //鼠标的 X 和 Y 轴坐标   
        x = y = 0;
      //邪恶的食指   
      $(el).mousedown(function (e) {
        //按下元素后,计算当前鼠标与对象计算后的坐标  
        x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight;
        //在支持 setCapture 做些东东  
        el.setCapture ? (
          //捕捉焦点   
          el.setCapture(),
          //设置事件   
          el.onmousemove = function (ev) {
            mouseMove(ev || event)
          },
          el.onmouseup = mouseUp
        ) : (
          //绑定事件   
          $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
        )
        //防止默认事件发生   
        e.preventDefault()
      });
      //移动事件   
      function mouseMove(e) {
        //宇宙超级无敌运算中... 
        els.width = e.clientX - x + 'px', //改变宽度
          els.height = e.clientY - y + 'px' //改变高度 
      }
      //停止事件   
      function mouseUp() {
        //在支持 releaseCapture 做些东东   
        el.releaseCapture ? (
          //释放焦点   
          el.releaseCapture(),
          //移除事件   
          el.onmousemove = el.onmouseup = null
        ) : (
          //卸载事件   
          $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
        )
      }
    }
    我自横刀向天笑,哈哈哈哈哈哈哈!
  • 相关阅读:
    windows 安装 python _ flask
    open-falcon 前端代码在windows上运行
    windows下 安装python_ldap MySQL-python
    rocketmq集群、配置详解和常用命令
    docker仓库管理(9)
    docker镜像管理和dockerfile详解(8)
    docker学习路线图
    docker组件如何协作(7)
    docker核心组件(6)
    docker镜像下载加速(5)
  • 原文地址:https://www.cnblogs.com/yinian/p/10281986.html
Copyright © 2020-2023  润新知