拖拽改变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)
    )
  }
}   怎么设置成只有右边的边框才能拖动,改变大小。在网上找的一段代码,只要点击DIV都可以改变大小。而且,我用 cursor: e-resize; 属性,鼠标移到DIV上,就变成了左右可拖动的箭头形状。



### 使用 CSS 和 JavaScript 实现拖拽调整 DIV 元素的 #### 方法一:仅使用 CSS 的 `resize` 属性 对于简单的水平或垂直方向上的尺寸调整,可以直接应用 CSS 中的 `resize` 属性。此方法适用于不需要复杂交互场景的情况。 ```css .resizable { width: 300px; height: 200px; overflow: auto; /* 必须 */ resize: both; /* 设置可调整的方向为两个维度 */ border: 1px solid black; } ``` 这种方法简单易用,但是存在局限性——它依赖于浏览器默认行为,并且无法自定义手柄样式[^1]。 #### 方法二:结合 CSS 和 JavaScript 提供更灵活的功能 当需求超出单纯 `resize` 能力范围时(比如想要定制化外观、支持多向拖曳等),则需引入 JavaScript 来增强功能: ##### HTML 结构 创建一个容器用于容纳被调整大小的目标区域以及操作手柄。 ```html <div class="container"> <div id="target"></div> <span id="handle">drag</span> </div> ``` ##### CSS 定义 为目标元素设定初始尺寸和其他视觉效果;同时给定手柄的基础样式以便用户识别其用途。 ```css #target { position: absolute; top: 50px; left: 50px; width: 200px; height: 150px; background-color: lightblue; } #handle { display: block; position: absolute; bottom: -8px; right: -8px; cursor: se-resize; padding: 4px; font-size: smaller; color: white; text-align: center; line-height: normal; user-select: none; z-index: 999; background-color: gray; } ``` ##### JavaScript 控制逻辑 监听鼠标按下事件,在移动过程中动态更新目标对象的位置与尺寸直至释放为止。 ```javascript let target = document.getElementById('target'); let handle = document.getElementById('handle'); // 记录起始位置和偏移量 let startX, startY, startWidth, startHeight; function mouseDown(event){ // 获取当前窗口坐标系下的起点坐标 startX = event.clientX; startY = event.clientY; // 存储原始度和度 startWidth = parseInt(target.style.width); startHeight = parseInt(target.style.height); // 绑定全局监听器处理后续动作 window.addEventListener('mousemove', resizing); window.addEventListener('mouseup', stopResize); } function resizing(event){ let dx = event.clientX - startX, dy = event.clientY - startY; // 更新新的度和度 target.style.width = (startWidth + dx) + 'px'; target.style.height = (startHeight + dy) + 'px'; // 防止页面滚动 event.preventDefault(); } function stopResize(){ // 移除临时绑定的监听器 window.removeEventListener('mousemove', resizing); window.removeEventListener('mouseup', stopResize); } // 开始监听手柄点击事件 handle.addEventListener('mousedown', mouseDown); ``` 以上代码片段展示了如何通过组合 CSS 和 JavaScript 创建一个具有基本交互性的组件,允许用户直观地改变指定 DOM 对象的外形参数[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值