$(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宽、高(转)的更多相关文章

  1. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  2. jQuery实现类似Chrome控制台可拖拽改变宽度的样式

    最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...

  3. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  4. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  5. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  6. Winform拖拽改变无边框窗体大小

    大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...

  7. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  8. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  9. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

  10. 可以随鼠标拖拽的div

    可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

  1. 不符合Json格式都能被Gson 转成对象使用!!!

    问题描述: 在与前端测试的时候,前端下发商品档案,结构为{""items":[{A对象},{B对象},{C对象}]},他下发了504条数据,但我们插入数据库的时候 只有1 ...

  2. pytorch MNIST加载已下载的数据集出现问题及解决方法

    import torch import torch.nn as nn from torch.autograd import Variable import torchvision import tor ...

  3. php7安装mogodb

    本文教程只在 PHP7 安装使用!!! PHP7 Mongdb 扩展安装 我们使用 pecl 命令来安装: $ /usr/local/php7/bin/pecl install mongodb 执行成 ...

  4. vim超级替换

    vim实现变量替换, 检测代码中#0-F0-FH替换为0x0-F0-F,例如#09FH替换为0x09F :%s/#\(\w\)\(\w\)\(\w\)H/0x\1\2\3/g 注: 标准格式 :s/p ...

  5. 关于flex元素超出父元素的解决方法

    左边是label, 右边是input. 设置父级为display:flex; input为flex:1; 然后label 为 white-space: nowrap; 这时input就有可能超出父级. ...

  6. stm32f030 模拟IIC

    #define read_SDA (GPIOA->IDR&GPIO_Pin_10) >>10 //PA10 SDA#define set_SDA GPIO_SetBits(G ...

  7. idea集成maven插件 使用骨架创建maven的java工具 不使用骨架创建maven的java工程

    idea集成maven插件   使用骨架创建maven的java工具  new-->FIle-->Model 选择Maven对勾选上要不不能使用骨架 找到这个,选上下一步 Finish即可 ...

  8. nginx 配置react项目 并且开启gzip压缩

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  9. JS篇(005)-== 和 === 的不同

    答案:==是抽象相等运算符,而===是严格相等运算符.==运算符是在进行必要的类型转换后,再比较.===运算符不会进行类型转换,所以如果两个值不是相同的类型,会直接返回false.使用==时,可能发生 ...

  10. 接口自动化-pycharm下查看日志文件中文乱码

      如图: 方法:pycharm 进入setting,找到File Encodings将编码全部设置gbk 现在室这样的:    修改为: 再次看日志: