jQuery.fn.extend({
drag: function() {
$(document).off("mouseup.drag").on("mouseup.drag",function(){
$(document).off("mousemove.drag");
});
return this.each(function() {
$(this).css("position",($(this).css("position")!="static"||"relative"))
.append($('<div class="dragbottom" style="bottom: 1px;right: 1px;cursor: nw-resize;position: absolute;background-image: url(\'http://files.jb51.net/file_images/200908/103419495.p.gif\');background-position: -42px -10px;width: 10px;height: 10px;font-size: 0;"></div>')
.off("mousedown.drag")
.on("mousedown.drag",function(event){
event.stopPropagation();
var $parent = $(this).parent();
$(document).off("mousemove.drag").on("mousemove.drag",function(e){
$parent.width(e.pageX-$parent.offset().left+2);
$parent.height(e.pageY-$parent.offset().top+2);
})
})
); });
}
});

用法

$("div").drag();

理论上table  form等非输入框都可以使用

jQuery鼠标拖曳改变div大小(模拟textarea右下角拖曳)的更多相关文章

  1. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  2. jquery 拖动改变div大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  4. jQuery拖拽改变元素大小

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

  5. jquery通过数值改变球大小

    在业务中遇到一个问题:在页面上显示一个球.且球的大小会应数字的大小而改变. 我们都知道 js是能够画圆(用css样式准备一个圆.假设addClass),但这并非我们想要的. 于是笔者脑洞打开:用样式画 ...

  6. jquery入门 动态调整div大小,使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...

  7. webstorm intelliJ IDEA phpstorm 设置鼠标滚动改变字体大小

    control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮打开,然后就可以通过 ctrl+鼠标上下滚动调节字体大小

  8. vscode设置让鼠标滚动改变字体大小

    打开settings.json文件 输入"editor.mouseWheelZoom": true, 这样比较方面,比默认的放大缩小来的快捷

  9. 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

随机推荐

  1. SCOI 2014 new :未来展望

    后期计划(可能延续到noip) 后期计划这种东西..唉...经历了三周的停课生涯,我似乎已经找到了一种状态,就是我一直期盼的状态,然后为了不落泪退役,具体是这样的: 由于现在的学习任务不太紧张了,所以 ...

  2. PHP setrawcookie() 函数

    定义和用法 setrawcookie() 函数不对 cookie 值进行 URL 编码,发送一个 HTTP cookie. cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到 ...

  3. NX二次开发-UFUN点构造器UF_UI_point_construct

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //点构造器 char sCue[] = "点构造器" ...

  4. Aliyun 安装NPM 总是3.5.2 解决方案

    由于默认的命令 阿里云安装的 Node 是 8.x 版本 导致NPM 一直安装的都是 3.5.2 版本,死活升级不上去 最后手动安装指定版本解决 wget -qO- https://deb.nodes ...

  5. 剑指offer——10跳台阶演变

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法.   题解: 纯找规律题:   class Solution { public: ...

  6. 20140309 C++ using 野指针 返回变量首地址

    1.C++中的using:http://blog.sina.com.cn/s/blog_61e904fd0100nuk3.html 使用using恢复.改变被继承类中的访问权限 2.野指针,没有指向的 ...

  7. C在结构体里面使用共用体

    在做链表的时候我们设计每个节点都是一个结构体,每个节点的数据用一个共用体表示,每创建malloc一个结构体节点我们也要相应的malloc共用体并把它付进去. 这是定义: typedef union E ...

  8. day5:函数练习题

    1.写函数,检查获取传入列表或者元祖的对象的所有奇数位索引的元素,并将作为新的列表返回给调用者 #解1: def lis(x): lis_1 = [] for i in range(len(x)): ...

  9. Maven如何发布jar包到Nexus私库

    Nexus2可以通过管理界面来上传jar包到私库中,而最新的Nexus3却找不到了上传界面,只能通过以下方式来发布到私库. 发布第三方jar包 这种情况是maven远程仓库没有,本地有的第三方jar包 ...

  10. python学习4—数据结构之列表、元组与字典

    python学习4—数据结构之列表.元组与字典 列表(list)深灰魔法 1. 连续索引 li = [1,1,[1,["asdsa",4]]] li[2][1][1][0] 2. ...