JavaScript implements mouse drag to adjust div size

This article shares the specific code of JavaScript to adjust the size of div by dragging the mouse for your reference. The specific content is as follows

Implementation ideas:

Change mouse style based on mouse position
When the mouse is on the edge and four corners of the div, different styles are displayed and modified by the cursor
When the mouse is pressed on the edge and four corners of the div, the specific coordinate point position is recorded, and the size of the div is modified according to the movement of the mouse
End size modification when mouse is released

Code implementation:

<!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>
 //The div that needs to be resized
 let c = document.getElementById('container')
 // body listens for movement events document.getElementById('body').addEventListener('mousemove', move)
 // Mouse down event c.addEventListener('mousedown', down)
 // Mouse release event document.getElementById('body').addEventListener('mouseup', up)

 // Whether to enable size modification let resizeable = false
 // The coordinates of the mouse when it is pressed, and save the previous mouse position when modifying the size let clientX, clientY
 // The minimum width and height that div can modify let minW = 8, minH = 8
 // The position of the mouse when it is pressed, represented by n, s, w, and e let direc = ''

 //End size modification when mouse is released function up() {
  resizeable = false
 }

 // Enable size modification when mouse is pressed function down(e) {
  let d = getDirection(e)
  // Enable size modification only when the position is four sides and four corners if (d !== '') {
   resizeable = true
   direc = d
   clientX = e.clientX
   clientY = e.clientY
  }
 }

 // Mouse movement event function move(e) {
  let d = getDirection(e)
  let cursor
  if (d === '') cursor = 'default';
  else cursor = d + '-resize';
  // Modify the mouse display effect c.style.cursor = cursor;
  // When resize is enabled, mouse movement will modify the div size if (resizeable) {
   // The mouse is pressed on the right side, modify the width if (direc.indexOf('e') !== -1) {
    c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
    clientX = e.clientX
   }

   // The mouse is pressed at the top, modify the height if (direc.indexOf('n') !== -1) {
    c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
    clientY = e.clientY
   }
   // The mouse is pressed at the bottom, modify the height if (direc.indexOf('s') !== -1) {
    c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
    clientY = e.clientY
   }

   // The mouse is pressed on the left, modify the width if (direc.indexOf('w') !== -1) {
    c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
    clientX = e.clientX
   }

  }
 }

 // Get the position of the div where the mouse is located 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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js realizes the mouse dragging div to slide left and right
js to achieve mouse drag and zoom div example code
Using javascript to implement mouse drag events
JS implementation of moving sub-windows by dragging the mouse
js implements the method of switching pictures by dragging the mouse
JS mouse drag example analysis
JavaScript simple drag and drop implementation code (mouse events mousedown mousemove mouseup)
jsMind adjusts the node position by dragging the mouse
js to achieve mouse drag multiple selection function example
JS realizes the effect of mouse pressing and dragging

<<: How to implement Linux automatic shutdown when the battery is low

>>: Complete steps of centos cloning linux virtual machine sharing