拖拽改变div的大小
拖拽改变div的大小
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resize</title>
<style type="text/css">
#rRightDown,
#rLeftDown,
#rLeftUp,
#rRightUp,
#rRight,
#rLeft,
#rUp,
#rDown {
position: absolute;
background: #C00;
width: 6px;
height: 6px;
z-index: 5;
font-size: 0;
} #rRight {
width: 15px
} #rLeftDown,
#rRightUp {
cursor: ne-resize;
} #rRightDown,
#rLeftUp {
cursor: nw-resize;
} #rRight,
#rLeft {
cursor: e-resize;
} #rUp,
#rDown {
cursor: n-resize;
} #rRightDown {
bottom: -3px;
right: -3px;
} #rLeftDown {
bottom: -3px;
left: -3px;
} #rRightUp {
top: -3px;
right: -3px;
} #rLeftUp {
top: -3px;
left: -3px;
} #rRight {
right: -3px;
top: 50%
} #rLeft {
left: -3px;
top: 50%
} #rUp {
top: -3px;
left: 50%
} #rDown {
bottom: -3px;
left: 50%
}
</style>
</head> <body>
<div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;">
<div id="rRightDown"> </div>
<div id="rLeftDown"> </div>
<div id="rRightUp"> </div>
<div id="rLeftUp"> </div>
<div id="rRight"> </div>
<div id="rLeft"> </div>
<div id="rUp"> </div>
<div id="rDown"></div>
</div>
<script>
var Sys = (function(ua) {
var s = {};
s.IE = ua.match(/msie ([\d.]+)/) ? true : false;
s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true : false;
s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true : false;
s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true : false;
s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true : false;
s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true : false;
return s;
})(navigator.userAgent.toLowerCase()); /*判断是哪一种浏览器,火狐,谷歌,ie*/
var $ = function(id) {
return document.getElementById(id);
}; /*获取元素,模仿jQuery*/
var Css = function(e, o) { /*更改对象的top,left,width,height来控制对象的大小*/
for(var i in o)
e.style[i] = o[i];
};
var Extend = function(destination, source) { /*拷贝对象的属性*/
for(var property in source) {
destination[property] = source[property];
}
};
/*直接调用方法*/
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
/*直接调用方法,并将事件的类型传入作为第一个参数*/
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
/*获取当前元素的属性*/
var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
/*事件监听,执行对应的函数*/
function addListener(element, e, fn) {
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
};
/*事件的移除*/
function removeListener(element, e, fn) {
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
};
/*创建一个新的可以拖拽的,变换大小的对象*/
var Class = function(properties) {
var _class = function() {
return(arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
var Resize = new Class({
initialize: function(obj) {
this.obj = obj;
this.resizeelm = null;
this.fun = null; //记录触发什么事件的索引
this.original = []; //记录开始状态的数组
this.width = null;
this.height = null;
this.fR = BindAsEventListener(this, this.resize); /*拖拽去更改div的大小*/
this.fS = Bind(this, this.stop); /*停止移除监听的事件*/
},
set: function(elm, direction) {
if(!elm) return;
this.resizeelm = elm;
/*点击事件的监听,调用start函数去初始化数据,监听mousemove和mouseup,这两个事件,当mouseover的时候,去更改div的大小,当mouseup,去清除之前监听的两个事件*/
addListener(this.resizeelm, 'mousedown', BindAsEventListener(this, this.start, this[direction]));
return this;
},
start: function(e, fun) {
this.fun = fun;
this.original = [parseInt(CurrentStyle(this.obj).width), parseInt(CurrentStyle(this.obj).height), parseInt(CurrentStyle(this.obj).left), parseInt(CurrentStyle(this.obj).top)];
console.log({
width: this.original[0],
height: this.original[1],
left: this.original[2],
top: this.original[3]
});
this.width = (this.original[2] || 0) + this.original[0];
this.height = (this.original[3] || 0) + this.original[1];
addListener(document, "mousemove", this.fR);
addListener(document, 'mouseup', this.fS);
},
resize: function(e) {
this.fun(e);
/*失去焦点的时候,调用this.stop去清除监听事件*/
Sys.IE ? (this.resizeelm.onlosecapture = function() {
this.fS();
}) : (this.resizeelm.onblur = function() {
this.fS();
})
},
stop: function() {
removeListener(document, "mousemove", this.fR);
removeListener(document, "mousemove", this.fS);
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); /**清除选中的内容*/
},
up: function(e) {
this.height > e.clientY ? Css(this.obj, {
top: e.clientY + "px",
height: this.height - e.clientY + "px"
}) : this.turnDown(e);
},
down: function(e) {
e.clientY > this.original[3] ? Css(this.obj, {
top: this.original[3] + 'px',
height: e.clientY - this.original[3] + 'px'
}) : this.turnUp(e);
},
left: function(e) {
e.clientX < this.width ? Css(this.obj, {
left: e.clientX + 'px',
width: this.width - e.clientX + "px"
}) : this.turnRight(e);
},
right: function(e) {
e.clientX > this.original[2] ? Css(this.obj, {
left: this.original[2] + 'px',
width: e.clientX - this.original[2] + "px"
}) : this.turnLeft(e);
},
leftUp: function(e) {
this.up(e);
this.left(e);
},
leftDown: function(e) {
this.left(e);
this.down(e);
},
rightUp: function(e) {
this.up(e);
this.right(e);
},
rightDown: function(e) {
this.right(e);
this.down(e);
},
turnDown: function(e) {
Css(this.obj, {
top: this.height + 'px',
height: e.clientY - this.height + 'px'
});
},
turnUp: function(e) {
Css(this.obj, {
top: e.clientY + 'px',
height: this.original[3] - e.clientY + 'px'
});
},
turnRight: function(e) {
Css(this.obj, {
left: this.width + 'px',
width: e.clientX - this.width + 'px'
});
},
turnLeft: function(e) {
Css(this.obj, {
left: e.clientX + 'px',
width: this.original[2] - e.clientX + 'px'
});
}
});
window.onload = function() {
new Resize($('ss')).set($('rUp'), 'up').set($('rDown'), 'down').set($('rLeft'), 'left').set($('rRight'), 'right').set($('rLeftUp'), 'leftUp').set($('rLeftDown'), 'leftDown').set($('rRightDown'), 'rightDown').set($('rRightUp'), 'rightUp');
}
</script>
</body> </html>
转自：http://blog.csdn.net/w329636271/article/details/50696121
拖拽改变div的大小的更多相关文章
- react 可拖拽改变位置和大小的弹窗
一 目标 最近,项目上需要一个可以弹出一个可以移动位置和改变大小的窗口,来显示一下对当前页面的一个辅助内容 二 思路 1.之前写过一个antd modal的可移动弹窗但是毕竟不如自己写的更定制化,比如 ...
- jQuery实现类似Chrome控制台可拖拽改变宽度的样式
最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- jQuery拖拽改变元素大小
一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- Winform拖拽改变无边框窗体大小
大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...
- jquery实现可拖拽的div
由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...
- JQuery拖拽改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...
随机推荐
- 安卓TTS语音合成经验分享（科大讯飞语音+）集成
应用场景:足浴软件,技师钟房安排调派和队列排序查看,语音播报提醒.老程序是使用双屏显卡,windows系统PC上运行一个无人值守桌面程序.如今安卓机顶盒(WIFI)和MINI电视棒通过HDMI接口和支 ...
- osgi:设置httpservice端口号
使用osgi开发http类的Service,在启动时默认端口是80.但有可能这个端口已经被本机上的其他程序占用.那么解决问题的方法有两种:1)关闭或修改占用程序的端口: 2)修改osgi启动时的端口. ...
- WebKit内核分析之Page
参考地址:http://blog.csdn.net/dlmu2001/article/details/6213377 注:本系列博客是在原博主博客基础上增加了自己的理解和片段,可以看源博文获得清晰的结 ...
- JS移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- 在C函数中保存状态：registry、reference和upvalues
C函数可以通过堆栈来和Lua交换数据,但有时候C函数需要在函数体的作用域之外保存某些Lua数据,那么我们想到全局变量或static变量,这样做的缺点是:(1)为Lua设计C函数库时,导致不可重入:(2 ...
- AssetBundle系列——打包前进行平台检测
在生成AssetBundle的时候,如果目标平台和当前平台不一致,Unity3D会自动将当前平台转换为目标平台. 如果项目中资源量比较大,这个转换过程是相当漫长的,并且不能够强行中止. 所以最好在Bu ...
- Cocos2d-x数据存储
分别是使用UserDefault,内置文件管理和sqlite3数据库的一般方式: 主要代码: bool DataScene::init(){ if (!Layer::init()){ return f ...
- Android 学习笔记之SurfaceView的使用+如何实现视频播放...
学习内容: 1.掌握Surface的使用... 2.Android中如何实现视频播放... 1.SurfaceView类的使用 在Android中,一般播放音频时我们可以去使用Android提供的 ...
- 学习android开发笔记
最近重点看了几个android工程的源代码,有几点疑问 1:为什么android客户端游戏要开启n个线程,而且通常每个线程的操作只有i++: 2:为什么很多列表在游戏逻辑和绘制逻辑里没有做同步: 3: ...
- ASP.NET运行时详解 生命周期入口分析
说起ASP.NET的生命周期,网上有很多的介绍.之前也看了些这方面的博客,但我感觉很多程序猿像我一样,看的时候似乎明白,一段时间过后又忘了.所以,最近Heavi花了一段时间研究ASP.NET的源代码, ...