JavaScript实现鼠标拖拽调整div大小
更新时间：2021年03月07日 06:51:00 作者：BDawn
这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽调整div大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现鼠标拖拽调整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>
//需要调整尺寸的div
let 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 = true
direc = d
clientX = e.clientX
clientY = e.clientY
}
}
// 鼠标移动事件
function move(e) {
let d = getDirection(e)
let cursor
if (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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
用JS实现的一个include函数...2007-07-07
async提供了很多函数用于异步流程控制，下面是async核心的几个函数，大家通过本文学习下，对使用async 实现异步控制相关知识，感兴趣的朋友一起看看吧2017-08-08
很多时候为了显示格式，需要在某一字符串不满位的情况下进行前补0操作。下面这篇文章就给大家主要介绍了javascript添加前置0(补零)的几种方法,文中给出了详细的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
偶尔听人说javascript闭包，让我联想起以前学编译原理和数字逻辑里讲的闭包，以前上课讲的闭包很难懂，而且含有递归的意思在里面，现在不想再查看里面的闭包概念。2010-06-06
事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一。本文将详细探讨JavaScript的事件机制，并对比分析了浏览器之间的不同，具体内容包括事件流、事件处理程序绑定方式、事件对象等。2017-01-01
Javascript 详解封装from表单数据为json串进行ajax提交
这篇文章主要介绍了Javascript 详解封装from表单数据为json串进行ajax提交的相关资料,需要的朋友可以参考下2017-03-03
本文向大家详细展示了从C#程序员的视角学习TypeScript的过程，主要是针对这两种语言的异同进行了简单的对比学习，希望对大家能够有所帮助。2015-06-06
JavaScript Archive Network 集合...2007-05-05
本文主要介绍了js中new一个对象的过程。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
bootstrap组件在前端开发中经常会用到，今天小编通过本文给大家分享bootstrap组件之进度条的基本用法，需要的朋友参考下吧2017-01-01
最新评论