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. springcloud分布式事务TXLCN

    新增一个model,pom文件引入依赖 <dependency>     <groupId>org.springframework.boot</groupId>   ...

  2. NX二次开发-UFUN拾取草图尺寸对话框UF_UI_select_sketch_dimensions

    #include <uf.h> #include <uf_ui.h> #include <uf_sket.h> UF_initialize(); //拾取草图尺寸对 ...

  3. 2019 IEEEXtreme 13.0 Impact Factor 影响因子

    Impact Factor 题目大意 顾名思义,求影响因子.有 n 行 json 数据,第一行为期刊信息,后面为出版商出版的文章信息.   输入输出 点击查看详细 输入: 6 {"publi ...

  4. 剑指offer——05重建二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  5. vue3+node全栈项目部署到云服务器

    一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和 ...

  6. SqlMapClient operation; bad SQL grammar []; nested exception is com.ibatis.common.jdbc.exception.NestedSQLException: InlineParameterMap

    <select id="getResByName" resultClass="Resources" parameterClass="java.l ...

  7. Logstash2.3.4趟坑之集成Redis哨兵模式

    最新在使用Lostash2.3.4收集数据的时候,在读取redis数据的时候,报了如下的一个异常: 异常如下 Pipeline aborted due to error {:exception=> ...

  8. Eclipse指定JDK版本

    Eclipse有好多版本,同时又分32位和64位,要使用相对应的版本和一样位数的JDK,Eclipse才能正常运行. 对应不上时,Eclipse 甚至不能正常启动.报错:“Failed to load ...

  9. 基于Mina的Http Server以及简单的Http请求客户端

    目的:    Java平台下的内部组件之间的通信.    1.WebService 由于感觉本身Java平台下的Web Service标准就不够统一,相互之间的调用就会有一些问题,更不用说与.net等 ...

  10. Extremely fast hash algorithm-xxHash

    xxHash - Extremely fast hash algorithm xxHash is an Extremely fast Hash algorithm, running at RAM sp ...