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. 今天工作整整一个月了,来记录一下(web前端)

    25号,工作整整一个月了,时光飞逝, 这一个月以来,无论是工作上还是生活上,都让我成长了很多,也多了些对人生的思考… 先回顾一下找工作的那段时间吧年前找工作有多辛酸,年后找工作就有多幸运那段日子,我这 ...

  2. dajian

    http://blog.csdn.net/inject2006/article/details/3064399 http://bbs.dospy.com/thread-16173173-1-464-1 ...

  3. AsyncCallback IAsyncResult

    using System; using System.Threading; using System.Collections.Generic; using System.Windows.Forms; ...

  4. 新版本Mongo4.0 新建用户

    db.createUser( { user: “admin”, pwd: “xxx”, roles: [ { role: “userAdminAnyDatabase”, db: “admin” } ] ...

  5. 20140402 cmake编译错误原因 同时装了vs2010和vs2012

    1.cmake编译错误原因 在用cmake编译opencv出现的错误 The CXX compiler identification is MSVC 16.0.30319.1 The C compil ...

  6. Vue项目的配置项

    目录 Vue项目的配置项 配置项 加载全局css文件 加载全局js文件 store仓库的配置和简单用法 BootStrap环境和jQuery的配置 前端后端交互(CORS问题) axios配置项(前端 ...

  7. HDU 2874 /// tarjan离线求森林里两点的距离

    题目大意: 在一个森林里 询问 u v 两点 若不能到达输出 "Not connected" 否则输出两点距离 https://blog.csdn.net/keyboarderqq ...

  8. 查看Linux服务器公网IP

    参考:https://www.cnblogs.com/pyyu/p/8545896.html 方法1:curl ifconfig.me 方法2:curl cip.cc

  9. item字母问题

    解决方法:复写toString方法 @Override public String toString() { return this.getBookTypeName(); } 将对象的toString ...

  10. tp5.0x代码执行

    1.拿到站首先平复一下心情 看了一下robots.txt结构像dedecms,网站还存在CDN,日了狗看到这里其实都想放弃来着,懒癌晚期,然后接着使用云悉平台走了一波,看了一下得到真实IP,看来只给w ...