jQuery鼠标拖曳改变div大小(模拟textarea右下角拖曳)
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右下角拖曳)的更多相关文章
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- jquery 拖动改变div大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
- jQuery拖拽改变元素大小
一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...
- jquery通过数值改变球大小
在业务中遇到一个问题:在页面上显示一个球.且球的大小会应数字的大小而改变. 我们都知道 js是能够画圆(用css样式准备一个圆.假设addClass),但这并非我们想要的. 于是笔者脑洞打开:用样式画 ...
- jquery入门 动态调整div大小,使其宽度始终为浏览器宽度
有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...
- webstorm intelliJ IDEA phpstorm 设置鼠标滚动改变字体大小
control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮打开,然后就可以通过 ctrl+鼠标上下滚动调节字体大小
- vscode设置让鼠标滚动改变字体大小
打开settings.json文件 输入"editor.mouseWheelZoom": true, 这样比较方面,比默认的放大缩小来的快捷
- 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
随机推荐
- Mysql 触发器写法
DELIMITER $$ USE `库名`$$ DROP TRIGGER /*!50032 IF EXISTS */ `trig_contract_status`$$ CREATE /*!50017 ...
- LeetCode 707. Design Linked List (设计链表)
题目标签:Linked List 题目让我们自己设计一个 linked list,可以是单向和双向的.这里选的是单向,题目并不是很难,但要考虑到所有的情况,具体看code. Java Solution ...
- 删除csdn自己上传的资源
原文地址:http://www.xuebuyuan.com/1875216.html 昨天晚上进行测试,上传了一个压缩包和大家分享,测试完成后,为了不想给被测试的公司造成伤害,决定把上传的包删除,结果 ...
- 华东交通大学2018年ACM“双基”程序设计竞赛 C. 公式题 (2) (矩阵快速幂)
题目链接:公式题 (2) 比赛链接:华东交通大学2018年ACM"双基"程序设计竞赛 题目描述 令f(n)=2f(n-1)+3f(n-2)+n,f(1)=1,f(2)=2 令g(n ...
- Codeforces 1166A - Silent Classroom
题目链接:http://codeforces.com/problemset/problem/1166/A 思路:统计所有首字母出现的次数,由贪心可知对半分最少. AC代码: #include<i ...
- HDU 4325 离散化+树状数组 或者 不使用树状数组
题意:给出一些花的开放时间段,然后询问某个时间点有几朵花正在开放. 由于ti<1e9,我们需要先将时间离散化,然后将时间点抽象为一个数组中的点,显然,我们需要进行区间更新和单点查询,可以考虑线段 ...
- 正版STlink的使用注意
https://blog.csdn.net/xinghuanmeiying/article/details/78026561
- iOS开发系列-Shell脚本生成IPA
概述 在公司开发到了测试阶段需要频繁打包交付给测试,看似简单的工作,重复的流程总是感觉不是那么好,我们可以借助苹果提供的编译指令编译项目. 自动化脚本编译打包IPA 常见的iOS项目就是基于xcode ...
- Random类和Math.random()方法
一.Random类的定义Random类位于 java.util 包中,主要用于生成伪 随机数Random类将 种子数 作为随机算法的起源数字,计算生成伪随机数,其与生成的随机数字的区间无关创建Rand ...
- Python学习笔记(一)——输入与输出
输出:——print() Python中的输出使用print()完成 >>> 在屏幕中输出Hello World >>> print('Hello World') ...