大致介绍
拖拽改变元素大小是在模拟拖拽上增加了一些功能
拖拽改变元素大小原理
首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小
当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小
代码实现:
// 获取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; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。