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)
        )
      }
    }
    我自横刀向天笑,哈哈哈哈哈哈哈!
  • 相关阅读:
    Linux Command
    sql查询将列里面的值替换为别的值但是实际值不变
    MY_SQLCode
    ComboBox设置Text属性
    WPF bmp和二进制转换
    C#中打开文件、目录、保存窗口
    WPF实现右键菜单
    BarTender SDK 实现调用模板条码打印
    VS Code非英语版本连接TFS错误解决方案
    DBeaver连接达梦数据库
  • 原文地址:https://www.cnblogs.com/yinian/p/10281986.html
Copyright © 2011-2022 走看看