JavaScript实现鼠标拖拽调整div大小

这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽调整div大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码，供大家参考，具体内容如下

实现思路：

根据鼠标位置改变鼠标样式
当鼠标在div的边缘和四个角时显示不同的样式，通过cursor修改
当鼠标在div的边缘和四个角按下时记录具体坐标点位置，并开始根据鼠标的移动修改div的尺寸
鼠标松开时结束尺寸修改

代码实现：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

									<!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>