JavaScript realizes mouse drag and drop to adjust div size

2021-11-01 02:02:58
OfStack

This article example for everyone to share the JavaScript mouse drag adjustment div size of the specific code, for your reference, the specific content is as follows

Implementation ideas:

Change the mouse style according to the mouse position Displays different styles when the mouse is on the edge and 4 corners of div, which is modified by cursor When the mouse is pressed at the edge and four corners of div, the specific coordinate point position is recorded, and the size of div is modified according to the mouse movement 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>
 // Need to adjust the size div
 let c = document.getElementById('container')
 // body Listen for mobile events 
 document.getElementById('body').addEventListener('mousemove', move)
 //  Mouse press event 
 c.addEventListener('mousedown', down)
 //  Mouse release event 
 document.getElementById('body').addEventListener('mouseup', up)

 //  Whether to turn on dimension modification 
 let resizeable = false
 //  The coordinates when the mouse is pressed down and saved when the size is modified 1 The position of the mouse 
 let clientX, clientY
 // div Modifiable minimum width and height 
 let minW = 8, minH = 8
 //  The position when the mouse is pressed, using n , s , w , e Denote 
 let direc = ''

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

 //  Turn on size modification when mouse is pressed 
 function down(e) {
  let d = getDirection(e)
  //  When the location is 4 Sum of edges 4 Dimension modification is turned on when the angle is 
  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 
  c.style.cursor = cursor;
  //  When size modification is turned on, mouse movement will modify div Dimensions 
  if (resizeable) {
   //  The mouse press position is on the right, 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 press position is in the upper part, 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 press position is 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 press position is 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 where the mouse is div Location of 
 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>