jQuery拖拽改变元素大小
一个非常简单的例子,体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/29.htm
以下是完整代码，保存到HTML文件打开也可以体验效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery 版“元素拖拽改变大小”原型-柯乐义 </title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
/*
* jQuery.Resize
* Date: 2014-12-04
* http://keleyi.com/
*/
$(function () {
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('kel'+'eyi'));
}); function bindResize(el) {
//初始化参数
var els = el.style,
//鼠标的 X 和 Y 轴坐标
x = y = 0;
//邪恶的食指
$(el).mousedown(function (e) {
//按下元素后，计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth,
y = e.clientY - el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function (ev) {
mouseMove(ev || event)
},
el.onmouseup = mouseUp
) : (
//绑定事件
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
)
//防止默认事件发生
e.preventDefault()
});
//移动事件
function mouseMove(e) {
//宇宙超级无敌运算中...
els.width = e.clientX - x + 'px',
els.height = e.clientY - y + 'px'
}
//停止事件
function mouseUp() {
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
)
}
}
</script>
<style type="text/css">
#keleyi{
position:absolute;
top:0;left:0;
width:200px;
height:100px;
background:#f1f1f1;
text-align:center;
line-height:16px;
border:1px solid #CCC;
cursor:move;
}
</style>
</head> <body>
<div id="keleyi">柯乐义：请按住本灰色区域并拖拽.<a href="http://keleyi.com/a/bjad/yy8jnwqj.htm" target="_blank">原文</a>.本效果支持各种浏览器，入Chrome,FireFox,IE,Opera等</div>
</body>
</html>
web前端汇总 ： http://www.cnblogs.com/jihua/p/webfront.html
jQuery拖拽改变元素大小的更多相关文章
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- JQuery拖拽改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...
- 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置
zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...
- Winform拖拽改变无边框窗体大小
大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...
- 拖拽改变div的大小
拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- jQuery实现类似Chrome控制台可拖拽改变宽度的样式
最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
随机推荐
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- Report processing of Microsoft Dynamic AX
Report processing of Microsoft Dynamic AX 版权声明:本文为博主原创文章,未经博主允许不得转载. The implementation of a general ...
- Java final 关键词修饰类、方法、变量
1. final修饰类 被修饰的类不能被继承,也没有子类.假如随意创建这些类的子类,子类可能会错误的修改父类的实现细节.出于安全原因,类的实现细节不允许有任何改动.在创建对象模型的时候,确信这个类不 ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- Sql Server系列：Select基本语句
1 T-SQL中SELECT语法结构 <SELECT statement> ::= [WITH <common_table_expression> [,...n]] <q ...
- OpenCASCADE JT Assistant
OpenCASCADE JT Assistant eryar@163.com Abstract. Siemens’ JT data format accepted as the world’s fir ...
- Restore Volume 操作 - 每天5分钟玩转 OpenStack（60）
前面我们 backup 了 voluem,今天我们将讨论如何 restore volume. restore 的过程其实很简单,两步走: 在存储节点上创建一个空白 volume. 将 backup 的 ...
- ASP.NET WebAPi之断点续传下载（下）
前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...
- Expression Template（表达式模板,ET）
1.前言 在前一篇文章自己实现简单的string类中提到在实现+操作符重载函数时,为了防止返回时生成的临时对象调用拷贝构造函数动态申请内存空间,使用了一个叫move的函数,它是C++0x新增的特性.既 ...
- 【记录】JS 获取 URL 中文参数编码
比如 URL:http://www.xxxx.com/中文参数 这个在 js 获取"中文参数"的时候会出现乱码. 解决方法:decodeURIComponent(获取的中文参数);