利用JavaScript实现拖拽改变元素大小
更新时间：2016年12月14日 14:25:47 作者：老板丶鱼丸粗面
本文主要介绍了JavaScript实现拖拽改变元素大小的原理及具体实例分析，具有很好的参考价值，需要的朋友一起来看下吧
大致介绍
拖拽改变元素大小是在模拟拖拽上增加了一些功能
拖拽改变元素大小原理
首先这个方块得知道我们想要改变这个它的大小，所以我给它设定一个范围，当点击这个范围时表明我们想要改变它的大小
当我们点击方块的这些红色区域时，方快就知道我们想要改变它的大小
代码实现：
// 获取event对象，兼容性写法
var ev = ev || event;
// 鼠标按下时的位置
var mouseDownX = ev.clientX;
var mouseDownY = ev.clientY;
// 方块上下左右四个边的位置和方块的长宽
var T0 = this.offsetTop;
var B0 = this.offsetTop + this.offsetHeight;
var L0 = this.offsetLeft;
var R0 = this.offsetLeft + this.offsetWidth;
var W = this.offsetWidth;
var H = this.offsetHeight;
// 设置方块的识别范围
var areaT = T0 + 10;
var areaB = B0 - 10;
var areaL = L0 + 10;
var areaR = R0 - 10;
其中areaT、areaB、areaL、areaR就是红色的区域
接下来方块知道我们想要改变它的大小了，但是要怎么改变，朝哪种方向改变大小。所以要判断改变大小的方向
代码实现：
// 判断改变方块的大小的方向
// 左
var changeL = mouseDownX < areaL;
// 右
var changeR = mouseDownX > areaR;
// 上
var changeT = mouseDownY < areaT;
// 下
var changeB = mouseDownY > areaB;
接下来就是最重要的改变样式了
代码实现：
//根据改变方块大小的方向不同进行大小的改变
// 左
if(changeL){
oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
}
// 右
if(changeR){
oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
}
// 上
if(changeT){
oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
}
// 下
if(changeB){
oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
}
注意：在改变左侧和上侧时要同时修改方块的位置，不然会出现拖左侧边而右侧边位置扩大的现象（拖动上侧边下侧边位置变大）
代码优化
未优化前的代码：
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
// 获取event对象，兼容性写法
var ev = ev || event;
// 鼠标按下时的位置
var mouseDownX = ev.clientX;
var mouseDownY = ev.clientY;
// 方块上下左右四个边的位置和方块的长宽
var T0 = this.offsetTop;
var B0 = this.offsetTop + this.offsetHeight;
var L0 = this.offsetLeft;
var R0 = this.offsetLeft + this.offsetWidth;
var W = this.offsetWidth;
var H = this.offsetHeight;
// 设置方块的识别范围
var areaT = T0 + 10;
var areaB = B0 - 10;
var areaL = L0 + 10;
var areaR = R0 - 10;
// 判断改变方块的大小的方向
// 左
var changeL = mouseDownX < areaL;
// 右
var changeR = mouseDownX > areaR;
// 上
var changeT = mouseDownY < areaT;
// 下
var changeB = mouseDownY > areaB;
oDiv.onmousemove = function(ev){
var ev = ev || event;
// 鼠标移动时的鼠标位置
var mouseMoveX = ev.clientX;
var mouseMoveY = ev.clientY;
//根据改变方块大小的方向不同进行大小的改变
// 左
if(changeL){
oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
}
// 右
if(changeR){
oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
}
// 上
if(changeT){
oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
}
// 下
if(changeB){
oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
}
// 限定范围
if(parseInt(oDiv.style.width) < 50){
oDiv.style.width = 50 + 'px';
}
if(parseInt(oDiv.style.height) < 50){
oDiv.style.height = 50 + 'px';
}
}
oDiv.onmouseup = function(){
oDiv.onmousemove = null;
}
}
这段代码现在主要有两个问题：
1、当鼠标移动过快移出方块时，就不能够继续改变元素的大小了
解决方案：把onmousemove事件和onmouseup事件绑定到document对象上
2、当方块中有文字时，拖拽改变方块大小时会触发浏览器默认的原生拖放行为
解决方案：1、阻止浏览器的默认行为（IE8浏览器除外）
在onmousedown中添加语句 return false
2、设置全局捕获（IE8）
在onmousedown中设置全局捕获
在onmouseup中取消全局捕获
优化后的代码：
<div id="div1">adfadsf</div>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
// 获取event对象，兼容性写法
var ev = ev || event;
// 鼠标按下时的位置
var mouseDownX = ev.clientX;
var mouseDownY = ev.clientY;
// 方块上下左右四个边的位置和方块的长宽
var T0 = this.offsetTop;
var B0 = this.offsetTop + this.offsetHeight;
var L0 = this.offsetLeft;
var R0 = this.offsetLeft + this.offsetWidth;
var W = this.offsetWidth;
var H = this.offsetHeight;
// 设置方块的识别范围
var areaT = T0 + 10;
var areaB = B0 - 10;
var areaL = L0 + 10;
var areaR = R0 - 10;
// 判断改变方块的大小的方向
// 左
var changeL = mouseDownX < areaL;
// 右
var changeR = mouseDownX > areaR;
// 上
var changeT = mouseDownY < areaT;
// 下
var changeB = mouseDownY > areaB;
// IE8 取消默认行为-设置全局捕获
if(oDiv.setCapture){
oDiv.setCapture();
}
document.onmousemove = function(ev){
var ev = ev || event;
// 鼠标移动时的鼠标位置
var mouseMoveX = ev.clientX;
var mouseMoveY = ev.clientY;
//根据改变方块大小的方向不同进行大小的改变
// 左
if(changeL){
oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
}
// 右
if(changeR){
oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
}
// 上
if(changeT){
oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
}
// 下
if(changeB){
oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
}
// 限定范围
if(parseInt(oDiv.style.width) < 50){
oDiv.style.width = 50 + 'px';
}
if(parseInt(oDiv.style.height) < 50){
oDiv.style.height = 50 + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
// 释放全局捕获
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
}
return false;
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
javascript实现的全国省市县无刷新多级关联菜单效果代码
这篇文章主要介绍了javascript实现的全国省市县无刷新多级关联菜单效果代码,涉及javascript针对页面元素的遍历与属性的动态操作技巧,需要的朋友可以参考下2016-08-08
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
下面小编就为大家带来一篇js中的eval()函数把含有转义字符的字符串转换成Object对象的方法。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
JavaScript 有Date、Array、String等这样的内置对象，功能强大使用简单，人见人爱，但在处理一些复杂的逻辑的时候，内置对象就很无力了，往往需要开发者自定义对象2013-08-08
将HTML自动转为JS代码...2006-07-07
下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
深入理解JavaScript系列（34）：设计模式之命令模式详解
这篇文章主要介绍了深入理解JavaScript系列（34）：设计模式之命令模式详解,命令模式(Command)的定义是：用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化,对请求排队或者记录请求日志,以及执行可撤销的操作,需要的朋友可以参考下2015-03-03
JavaScript 字符串乘法，国外的文章，翻译2009-08-08
这篇文章主要介绍了微信小程序中的上拉、下拉菜单功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最近在小程序里，做了一个类似微博刷视频的需求，其中有一部分功能需要实现自定义进度条，在做完第一版之后发现进度条不顺滑，而后想查查网上看有没有什么好的方案，但最终没找到合适的。下面给大家分享JS进度条顺滑版实现代码，需要的朋友参考下吧2021-08-08
原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,这篇文章主要给大家介绍了关于JavaScript原型与原型链的相关资料,需要的朋友可以参考下2021-10-10
最新评论