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. 自定义alert 确定、取消功能

    以删除为例,首先新建html <table border="1" cellpadding="0" cellspacing="0" id ...

  2. natapp自动获取免费的动态端口域名

    前段时间,因为客户有个项目要求跨局域网进行远程控制桌面,想知道能不能实现.于是查询了许多资料,了解到需要有公网服务器作为中介才能够实现,但是公司又没有公网服务器,于是只有利用花生壳.natapp服务器 ...

  3. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  4. nginx启停脚本

    安装nginx时,源码包中未带官方的启动脚本,也就无法使用service nginxd start这种启动方式,查了下资料自己写了一个: #!/bin/bash #@version: #@author ...

  5. [kuangbin带你飞]专题一 简单搜索 - L - Oil Deposits

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...

  6. 剑指offer——21正则表达式匹配

    题目描述 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式 ...

  7. 解析css3 shake 抖动样式

    前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下: CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的 ...

  8. scrapy的使用-scrapy shell

    进入     该目录下执行scrapy shell 文件, 在命令行可执行该文件中链接的xpath语法,和BeautifulSoup语法.

  9. 为kubectl配置别名和命令行补齐

    配置别名 # vim ~/.bashrc 添加 alias k='kubectl' # source ~/.bashrc 配置命令行补齐 # yum install -y bash-completio ...

  10. eclipse新建maven项目和聚合项目

    1.new maven project :  next 2.勾选 create a simple project  :  next 3.Group Id:项目的包路径 如com.jiayou.zjl, ...