鼠标拖拽调整div大小
2024-05-13 03:31:10
鼠标拖拽调整div大小
实现思路
- 根据鼠标位置改变鼠标样式
- 当鼠标在div的边缘和四个角时显示不同的样式，通过cursor修改
- 当鼠标在div的边缘和四个角按下时记录具体坐标点位置， 并开始根据鼠标的移动修改div的尺寸
- 鼠标松开时结束尺寸修改
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body, html {width: 100%;height: 100%;margin: 0;}#container {width: 200px;height: 200px;padding: 15px;border: #00cdcd 2px solid;box-sizing: border-box;}.item {cursor: default;width: 100%;height: 100%;background: #757575;}</style>
</head>
<body id="body">
<div id="container"><div class="item"></div>
</div>
<script>//需要调整尺寸的divlet c = document.getElementById('container')// body监听移动事件document.getElementById('body').addEventListener('mousemove', move)// 鼠标按下事件c.addEventListener('mousedown', down)// 鼠标松开事件document.getElementById('body').addEventListener('mouseup', up)// 是否开启尺寸修改let resizeable = false// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置let clientX, clientY// div可修改的最小宽高let minW = 8, minH = 8// 鼠标按下时的位置，使用n、s、w、e表示let direc = ''// 鼠标松开时结束尺寸修改function up() {resizeable = false}// 鼠标按下时开启尺寸修改function down(e) {let d = getDirection(e)// 当位置为四个边和四个角时才开启尺寸修改if (d !== '') {resizeable = truedirec = dclientX = e.clientXclientY = e.clientY}}// 鼠标移动事件function move(e) {let d = getDirection(e)let cursorif (d === '') cursor = 'default';else cursor = d + '-resize';// 修改鼠标显示效果c.style.cursor = cursor;// 当开启尺寸修改时，鼠标移动会修改div尺寸if (resizeable) {// 鼠标按下的位置在右边，修改宽度if (direc.indexOf('e') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'clientX = e.clientX}// 鼠标按下的位置在上部，修改高度if (direc.indexOf('n') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在底部，修改高度if (direc.indexOf('s') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在左边，修改宽度if (direc.indexOf('w') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'clientX = e.clientX}}}// 获取鼠标所在div的位置function getDirection(ev) {let xP, yP, offset, dir;dir = '';xP = ev.offsetX;yP = ev.offsetY;offset = 10;if (yP < offset) dir += 'n';else if (yP > c.offsetHeight - offset) dir += 's';if (xP < offset) dir += 'w';else if (xP > c.offsetWidth - offset) dir += 'e';return dir;}
</script>
</body>
</html>功能增强，通过八个点拖动元素尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body, html {width: 100%;height: 100%;margin: 0;}#container {width: 200px;height: 200px;padding: 15px;border: #00cdcd 2px solid;box-sizing: border-box;position: relative;margin: 40px;}.point{display: none;}#container:hover .point{display: block;width: 4px;height: 4px;border-radius: 2px;border: #08253b 1px solid;position: absolute;}.top{top: -2px;left: 50%;}.bottom{bottom: -2px;left: 50%;}.left{left: -2px;top: 50%;}.right{right: -2px;top: 50%;}.top-left{top: -2px;left: -2px;}.bottom-left{bottom: -2px;left: -2px;}.top-right{top: -2px;right: -2px;}.bottom-right{bottom: -2px;right: -2px;}.item {cursor: default;width: 100%;height: 100%;background: #757575;}</style>
</head>
<body id="body">
<div id="container"><div class="item"></div><div class="point top"></div><div class="point left"></div><div class="point right"></div><div class="point bottom"></div><div class="point top-left"></div><div class="point top-right"></div><div class="point bottom-left"></div><div class="point bottom-right"></div>
</div>
<script>//需要调整尺寸的divlet c = document.getElementById('container')// body监听移动事件document.getElementById('body').addEventListener('mousemove', move)// 鼠标按下事件c.addEventListener('mousedown', down)// 鼠标松开事件document.getElementById('body').addEventListener('mouseup', up)// 是否开启尺寸修改let resizeable = false// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置let clientX, clientY// div可修改的最小宽高let minW = 8, minH = 8// 鼠标按下时的位置，使用n、s、w、e表示let direc = ''// 鼠标松开时结束尺寸修改function up() {resizeable = false}// 鼠标按下时开启尺寸修改function down(e) {let d = getDirection(e)// 当位置为四个边和四个角时才开启尺寸修改if (d !== '') {resizeable = truedirec = dclientX = e.clientXclientY = e.clientY}}// 鼠标移动事件function move(e) {console.log(e);let d = getDirection(e)let cursorif (d === '') cursor = 'default';else cursor = d + '-resize';// 修改鼠标显示效果c.style.cursor = cursor;// 当开启尺寸修改时，鼠标移动会修改div尺寸if (resizeable) {// 鼠标按下的位置在右边，修改宽度if (direc.indexOf('e') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'clientX = e.clientX}// 鼠标按下的位置在上部，修改高度if (direc.indexOf('n') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在底部，修改高度if (direc.indexOf('s') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在左边，修改宽度if (direc.indexOf('w') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'clientX = e.clientX}}}// 获取鼠标所在div的位置function getDirection(ev) {let dir = '';if (ev.target.className.indexOf('top') >= 0) dir += 'n';else if (ev.target.className.indexOf('bottom') >= 0) dir += 's';if (ev.target.className.indexOf('left') >= 0) dir += 'w';else if (ev.target.className.indexOf('right') >= 0) dir += 'e';return dir;}
</script>
</body>
</html>鼠标拖拽调整div大小相关推荐
- js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
- 鼠标拖拽缩放面板大小
又是一段不完美的实现,为啥设置样式left和top为空就能解决某一边元素动而右下角元素不动的bug??? <!DOCTYPE html> <html lang="en&qu ...
- html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者
封装为了jq插件,如下 drag. ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最 ...
- css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
- vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码 最终效果 部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
- html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
- winform自定义窗体边框样式模板（支持四周边框拖拽改变窗体大小，支持鼠标拖动头部移动窗体）
winform自己的边框已经过时,但小伙伴们又觉得自定义太过麻烦.本文将手把手教你自定义winform边框样式,并提供源代码链接(可直接作为模板使用).话不多说,直接上操作步骤. 先上一张完成截图 一 ...
- 用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
- JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
最新文章
- docker 镜像修改的配置文件自动还原_原创 | 全网最实在的docker入门教程四
- SpringBoot+Mybatis加载Mapper.xml文件的两种方式
- 上传图片方向不对 php,php-上传图片时出现错误,没有这样的路径或目录
- ExtAspNet应用技巧（十七） - 新增菜单
- 几个常用的Linux操作系统监控脚本
- 抽象工厂模块在开发中的应用
- 大厂出品免费图标资源站
- 做csdn图片水印中最亮的崽
- 开发项目的简单流程（需求、数据库、编码）
- 蓝桥杯2016年七届C/C++省赛C组第八题-冰雹数
- js文件之间函数的调用
- WMS系统多少钱？什么是WMS系统
- Java编程学习指南（带学习经验）
- 中国电子科技集团公司家族谱及信息
- java jdk15.0.1环境配置（图文教程）
- 如何使用if嵌套结构；实现用户输入个人的身高和体重，计算出国际肥胖指标BMI值，并判断输出您属于 哪种体型
- python整数逆位运算_[python/工具] python z3库学习 减乘除位与运算 ctf一把梭
- 计算机配置太低,安装Win10系统电脑配置太低怎么办
- llt自发光_“贝爷”联名款海系列新品得物独家首发，呼吁年轻人保护海洋环境...
- 不只有CPU，细数移动GPU的那些事
热门文章
- 阿里云关于“注册局无域名注册管理机构许可的域名限期转出通知”的问答及方法
- Matlab-QPSK调制与解调 QPSK信号产生的信息、I路、Q路信号对比图以及接收端解调的I路,Q 路，信息恢复的对比图
- Darknet自带的tracker跟踪功能
- java中implements是什么意思_java中implements和Interface的不同是什么?
- 面试问到不会的技术问题？大小公司？程序员、校招面试技巧
- Java与设备（PLC）通信
- PC端Web聊天界面+代码分享（HTML+CSS）
- 一个很全的 iOS 手机号正则表达式
- [2018.12.4]斜率优化(以[Apio2010]特别行动队为例)
- android gridview教程,Android GridView使用