鼠标拖拽缩放面板大小

又是一段不完美的实现，为啥设置样式left和top为空就能解决某一边元素动而右下角元素不动的bug？？？

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>带蒙层的弹出框</title><style>body {margin: 0;padding: 50px;font-size: 14px;color: #333;}.panel {width: 400px;height: 240px;border: 1px solid #ccc;position: relative;}.title {/* width: 100%; *//* height: 40px; */background-color: #ccc;text-align: center;line-height: 40px;font-weight: bold;}.resizable-r {position: absolute;right: 0;top: 0;width: 10px;height: 100%;background-color: aqua;cursor: e-resize;}.resizable-b {position: absolute;left: 0;bottom: 0;width: 100%;height: 10px;background-color: hotpink;cursor: s-resize;}.resizable-rb {position: absolute;right: 0;bottom: 0;width: 20px;height: 20px;background-color: mediumpurple;cursor: se-resize;}</style>
</head><body><div class="panel" id="resizable"><div class="title">Resizable Panel</div><!-- 需要三个控制元素， 右，下，右下，以下是静态页面，后面需要动态加入--><!-- <div class="resizable-r"></div><div class="resizable-b"></div><div class="resizable-rb"></div> --></div><script>// panel面板，ctrl控制元素，type控制元素类型(r,b,rb)var m_panel, m_ctrl, m_type;// moving鼠标是否按在控制元素，开始拖动；m_start_x/y鼠标相对ctrl的left/top；m_to_y鼠标的新位置var moving = 0,m_start_x = 0,m_start_y = 0,m_to_x = 0,m_to_y = 0;// 为控制元素支持拖拽function on_mousedown(e, panel, ctrl, type) {var e = e || window.event;m_start_x = e.pageX - ctrl.offsetLeft;m_start_y = e.pageY - ctrl.offsetTop;m_panel = panel;m_ctrl = ctrl;m_type = type;// 开始侦听处理移动事件moving = setInterval(on_move, 10);}function on_move() {// 如果鼠标在移动if (moving) {// 拖动范围限定，这个限定很不合理！！！，还不如直接设一个最小值呢var min_left = m_panel.offsetLeft;var min_top = m_panel.offsetTop;var to_x = m_to_x - m_start_x;var to_y = m_to_y - m_start_y;to_x = Math.max(to_x, min_left);to_y = Math.max(to_y, min_top);switch (m_type) {case 'r':m_ctrl.style.left = to_x + 'px';// 加上控制元素的宽度10防止跳动m_panel.style.width = to_x + 10 + 'px';break;case 'b':m_ctrl.style.top = to_y + 'px';m_panel.style.height = to_y + 10 + 'px';break;case 'rb':m_ctrl.style.left = to_x + 'px';m_ctrl.style.top = to_y + 'px';m_panel.style.width = to_x + 20 + 'px';m_panel.style.height = to_y + 20 + 'px';break;}}}document.onmousemove = function(e) {var e = e || window.event;m_to_x = e.pageX;m_to_y = e.pageY;};document.onmouseup = function() {clearInterval(moving);moving = 0;// 解决某一边元素动而右下角元素不动的bugvar cls = document.getElementsByClassName("resizable-ctrl");for (var i = 0; i < cls.length; i++) {cls[i].style.left = '';cls[i].style.top = '';}}// 为面板加入控制元素function Resizable(panel_id) {var panel = document.getElementById(panel_id);var r = document.createElement('div');var b = document.createElement('div');var rb = document.createElement('div');r.className = "resizable-r resizable-ctrl";b.className = "resizable-b resizable-ctrl";rb.className = "resizable-rb resizable-ctrl";panel.appendChild(r);panel.appendChild(b);panel.appendChild(rb);// 为控制元素设置拖拽处理r.addEventListener('mousedown', function(e) {on_mousedown(e, panel, r, 'r');});b.addEventListener('mousedown', function(e) {on_mousedown(e, panel, b, 'b');});rb.addEventListener('mousedown', function(e) {on_mousedown(e, panel, rb, 'rb');});}Resizable('resizable');</script>
</body></html>

慕课网https://www.imooc.com/video/3578/0

鼠标拖拽缩放面板大小相关推荐

鼠标拖拽调整div大小
鼠标拖拽调整div大小实现思路根据鼠标位置改变鼠标样式当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的 ...
html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者
封装为了jq插件,如下 drag. ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最 ...
html左右分隔可调整,CSS实现可拖拽分割面板
项目中经常会用到左右分栏布局方式,一般情况左侧面板大小都是固定的,但是有时会有需求做成拖拽式的,能够自由拖拽调整面板大小.(作为当年的资深Java Swing开发人员,对于JSplitPane印象深刻 ...
3dmax java_Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
winform自定义窗体边框样式模板（支持四周边框拖拽改变窗体大小，支持鼠标拖动头部移动窗体）
winform自己的边框已经过时,但小伙伴们又觉得自定义太过麻烦.本文将手把手教你自定义winform边框样式,并提供源代码链接(可直接作为模板使用).话不多说,直接上操作步骤. 先上一张完成截图一 ...
简单的进度条拖动效果及拖拽改变层大小
业务需求价格区间的进度条拖动初级demo 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&qu ...
【计算机图形】制作能够利用鼠标拖拽实现360度旋转的3D人体模型flash文件
前段时间,由于要对参加挑战杯的系统进行改善,老师要求我们在系统当中添加一个可旋转的3D人体模型,于是俺陷入了深深的思考当中.之前一直都没有接触过3D模型的制作,而且老师这回给的时间又特紧,当时那个急呀 ...
解决d3.event在v7版本无效影响zoom拖拽缩放问题
近期由于代码内关于d3版本的更新,由原来的v3 v4更新值v7.0.0,导致原有关于d3的波点图内zoom方法的拖拽缩放.tooltip提示框问题开始报错,即d3.event数据废弃了 1.设置d3图 ...
java cms 拖拽布局_鼠标拖拽就能轻松建站 We7 CMS评测
We7 CMS是由西部动力推出的一套采用C#开发的,基于.net2.0,可以运行于Oracle.SQLite.Sqlserver.MySQL.Access等数据库之上的网站内容管理系统软件(Conte ...

鼠标拖拽缩放面板大小

鼠标拖拽缩放面板大小相关推荐

最新文章

热门文章