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/ ...
随机推荐
- Session for SSRS Report of Microsoft Dynamics AX
Session for SSRS Report of Microsoft Dynamics AX 版权声明:本文为博主原创文章,未经博主允许不得转载. Contract •A data contrac ...
- JavaScript中闭包之浅析解读
JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常 ...
- 阿里云centos7搭建wordpress环境
阿里云搭建wordpress系统 一.购买阿里云 二.安装php开发环境 1． https://www.apachefriends.org/zh_cn/index.html网站下载linux下的xam ...
- MongoDB 数据分发
在MongoDB(版本 3.2.9)中,数据的分发是指将collection的数据拆分成块(chunk),分布到不同的分片(shard)上,数据分发主要有2种方式:基于数据块(chunk)数量的均衡分 ...
- JavaScript JsTree实例
var RightTree= function () { }; RightTree.prototype = { //初始化权限树 InitRightTree: function () { $.ajax ...
- Android开发之Toast
第一次在博客园发布文章,就把我刚弄明白的关于Android开发中的提示设置,分享给大家. Toast是Android中经常用到的一个方法,用于简单的用户提示,经过摸索我发现了Toast的两种使用方式, ...
- MVC实用架构设计（三）——EF-Code First（4）：数据查询
前言 首先对大家表示抱歉,这个系列已经将近一个月没有更新了,相信大家等本篇更新都等得快失望了.实在没办法,由于本人水平有限,写篇博客基本上要大半天的时间,最近实在是抽不出这么长段的空闲时间来写.另外也 ...
- Android调用Jni,非常简单的一个Demo
step1:创建一个android项目 Project Name:jnitest Build Target: Android 1.6 Application Nam ...
- JavaScript之自我总结篇
最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...
- 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)
工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...