拖拽改变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上,就变成了左右可拖动的箭头形状。



  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui 中的 dialog 组件似乎没有直接提供可拉伸放大缩小的功能,但是可以通过以下方法实现: 1. 通过设置 `resizable` 属性为 `true`,使得 dialog 可以被拖动改变大小。 2. 在 dialog 中添加一个可以拖动改变大小的元素,比如一个 div,然后监听该元素的 `mousedown` 和 `mousemove` 事件,在鼠标移动时改变 dialog 的宽高。 以下是一个简单的示例代码: ```html <template> <el-dialog :resizable="true" :visible.sync="dialogVisible" title="可拉伸的对话框" :width="dialogWidth" :height="dialogHeight"> <div class="resize-handle" @mousedown="onMouseDown"></div> <p>这是一个可拉伸的对话框。</p> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, dialogWidth: '50%', dialogHeight: '50%', startX: 0, startY: 0, resizing: false, }; }, methods: { onMouseDown(event) { this.startX = event.clientX; this.startY = event.clientY; this.resizing = true; document.addEventListener('mousemove', this.onMouseMove); document.addEventListener('mouseup', this.onMouseUp); }, onMouseMove(event) { if (this.resizing) { const deltaX = event.clientX - this.startX; const deltaY = event.clientY - this.startY; this.dialogWidth = `${parseInt(this.dialogWidth) + deltaX}px`; this.dialogHeight = `${parseInt(this.dialogHeight) + deltaY}px`; this.startX = event.clientX; this.startY = event.clientY; } }, onMouseUp() { this.resizing = false; document.removeEventListener('mousemove', this.onMouseMove); document.removeEventListener('mouseup', this.onMouseUp); }, }, }; </script> <style> .resize-handle { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; } </style> ``` 在这个示例中,我们设置了 `resizable` 属性为 `true`,使得对话框可以被拖动改变大小。我们还在对话框中添加了一个 div 元素,作为可拉伸的元素。当用户在该元素上按下鼠标时,我们开始监听鼠标移动事件,并在移动过程中改变对话框的宽高。在鼠标抬起时,我们停止监听事件。最后,我们通过样式将该元素设置为右下角的三角形,表示可以拖动改变大小。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值