zoukankan      html  css  js  c++  java
  • 拖拽改变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)
        )
      }
    }
    我自横刀向天笑,哈哈哈哈哈哈哈!
  • 相关阅读:
    AIO异步非阻塞学习
    Netty TCP粘包/拆包问题《二》
    Netty TCP粘包/拆包问题《一》
    修改host文件屏蔽视频广告和网站
    HTML DOM参考手册
    PPT图片快速编辑技巧
    ExtJS ComboBox的用法+代码
    4_python之路之模拟工资管理系统
    3_python之路之商城购物车
    2_python之路之多级菜单
  • 原文地址:https://www.cnblogs.com/yinian/p/10281986.html
Copyright © 2011-2022 走看看