一个非常简单的例子,体验效果：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拖拽改变元素大小的更多相关文章

  1. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  2. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  3. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  4. JQuery拖拽改变元素的尺寸

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...

  5. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  6. Winform拖拽改变无边框窗体大小

    大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...

  7. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  8. jQuery实现类似Chrome控制台可拖拽改变宽度的样式

    最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...

  9. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

随机推荐

  1. Java面试（1）-- Java逻辑运算符

    class Demo04{ public static void main(String[] args){ //逻辑运算符 //例1 System.out.println(true | false & ...

  2. KnockoutJS 3.X API 第七章 其他技术(2) 使用扩展器来增加可观察量(监控属性)

    Knockout observables提供了支持读取/写入值并在值改变时通知订阅者所需的基本功能. 但在某些情况下,您可能希望向可观察者添加其他功能. 这可能包括通过在可观察者前面放置一个可写的计算 ...

  3. 简易版的TimSort排序算法

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处http://www.cnblogs.com/nullzx/ 1. 简易版本TimSort排序算法原理与实现 TimSort排序算法是Python和Ja ...

  4. SSRS 报表点击 Preview 显示失败

    今天使用Remote Desktop 链接到Remote Server,在SSDT中创建一个RDL文件,点击PreView预览时,出现以下错误信息 查看details information ==== ...

  5. Sql Server系列：数据控制语句

    数据控制语句用来设置.更改用户或角色的权限,包括GRANT.DENY.REVOKE等语句. GRANT用来对用户授予权限,REVOKE可用于删除已授权的权限,DENY用于防止主体通过GRANT获得特定 ...

  6. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. java自定义类加载器

    前言 java反射,最常用的Class.forName()方法.做毕设的时候,接收到代码字符串,通过 JavaCompiler将代码字符串生成A.class文件(存放在classpath下,也就是ec ...

  8. MySQL Doublewrite Buffer及业务评估

    1. 关于Doublewrite Buffe的总结 Doublewrite Buffer:Doublewrite Buffer出现的初衷是防止buffer pool中的脏页刷新到磁盘中,出现部分写的问 ...

  9. Perl碎碎念

    1. 如何去重 #!/usr/bin/perl use strict; my %hash; while(<>){ chomp; print "$_\n" unless ...

  10. 1Z0-053 争议题目解析46

    1Z0-053 争议题目解析46 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 46.What happens when you run the SQL Tuning Adviso ...