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/ ...
随机推荐
- LeetCode OJ1:Reverse Words in a String
问题描述: Given an input string, reverse the string word by word. For example,Given s = "the sky is ...
- 仿h5拖拽
在h5中有个拖拽的声明式命令,就如html属性一样,简单强大. 而在网页上拖拽的功能还是需求很大的,所以对这方面应该去仔细了解一下. 所以仿一一下它的实现.只是仿了它的复制一份到目标容器的功能.它还有 ...
- OpenCASCADE Conic to BSpline Curves-Parabola
OpenCASCADE Conic to BSpline Curves-Parabola eryar@163.com Abstract. Rational Bezier Curve can repre ...
- C#单例模式详解
C#要实现单例模式必须要有以下三点: 声明私有静态成员.私有化构造函数.静态函数返回实例. private static GameManager s_GameManager=null; private ...
- Android图片缓存之Glide进阶
前言: 前面学习了Glide的简单使用(Android图片缓存之初识Glide),今天来学习一下Glide稍微复杂一点的使用. 图片缓存相关博客地址: Android图片缓存之Bitmap详解 And ...
- Attach Volume 操作（Part II） - 每天5分钟玩转 OpenStack（54）
上一节我们讨论了 attach volume 操作中 cinder-api 的工作,本节讨论 cinder-volume 和 nova-compute 如何将 volume attach 到 Inst ...
- [OpenCV] Samples 12: laplace
先模糊再laplace,也可以替换为sobel等. 变换效果后录成视频,挺好玩. #include "opencv2/videoio/videoio.hpp" #include & ...
- 深入seajs源码系列二
模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 首先定义了一个Module类,对应与一个模块 funct ...
- 常见ArcGIS操作（以10.0为例）
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.建立缓冲区 先在图层属性表里面新建一个缓冲区半径字段,然后对该字段赋 ...
- Kooboo CMS - @Html.FrontHtml().Meta()详解。
下面是代码: public virtual IHtmlString Meta() { AggregateHtmlString htmlStrings = new AggregateHtmlString ...