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/ ...
随机推荐
- 吐槽：基于PhoneGap开发移动项目
目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iph ...
- 收集的React.JS资料
主页 http://facebook.github.io/react/ https://github.com/facebook/react 中文站 http://www.reactjs.cn/ h ...
- OpenCASCADE Make Primitives-Sphere
OpenCASCADE Make Primitives-Sphere eryar@163.com Abstract. The sphere is the simplest topology shape ...
- 从零学java--传智播客
java的输入需要引用Scanner包 import java.util.Scanner; class ScannerDemo{ public static void main(String[] ar ...
- Util应用程序框架公共操作类（一）:数据类型转换公共操作类（介绍篇）
本系列文章将介绍一些对初学者有帮助的辅助类,这些辅助类本身并没有什么稀奇之处,如何能发现需要封装它们可能更加重要,所谓授之以鱼不如授之以渔,掌握封装公共操作类的技巧才是关键,我会详细说明创建这些类的动 ...
- [Math] Backpropagation
没啥自己的内容,推荐若干链接,这些是真爱,你值得拥有. Principles of training multi-layer neural network using backpropagation ...
- mysql表名查询sql
select table_schema,table_name,engine from information_schema.tables where table_schema not in('info ...
- 【Java心得总结二】浅谈Java中的异常
作为一个面向对象编程的程序员对于 下面的一句一定非常熟悉: try { // 代码块 } catch(Exception e) { // 异常处理 } finally { // 清理工作 } 就是面向 ...
- HTML基本元素（二）
1.图像 <img src="URL" alt="" /> 说明 src 定义图像的url alt 定义图像的替代文本 width 设置图像的宽度 ...
- 学习php中的正则表达式,PHP正则表达式基础
语法格式:位于定界符"/"之间. 较为常用的元字符包括: “+”, “*”,以及 “?”. 其中, “+”元字符规定其前导字符必须在目标对象中连续出现一次或多次, “*”元字符规定 ...