JavaScript implements mouse drag to adjust div size

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

Recommend

Can MySQL's repeatable read level solve phantom reads?

introduction When I was learning more about datab...

Detailed explanation of system input and output management in Linux

Management of input and output in the system 1. U...

How to implement parallel downloading of large files in JavaScript

Table of contents 1. HTTP Range Request 1.1 Range...

About the problem of running git programs in jenkins deployed by docker

1. First, an error message is reported when assoc...

Implementing a simple whack-a-mole game in JavaScript

This article shares the specific code for JavaScr...

How to access the local machine (host machine) in Docker

Question How to access the local database in Dock...

Vue implements two routing permission control methods

Table of contents Method 1: Routing meta informat...

Vue+webrtc (Tencent Cloud) practice of implementing live broadcast function

Table of contents 1. Live broadcast effect 2. Ste...

VMware workstation 12 install Ubuntu 14.04 (64 bit)

1. Installation Environment Computer model: Lenov...

Vue.js $refs usage case explanation

Despite props and events, sometimes you still nee...

Detailed explanation of js closure and garbage collection mechanism examples

Table of contents Preface text 1. Closure 1.1 Wha...

How to detect file system integrity based on AIDE in Linux

1. AIDE AIDE (Advanced Intrusion Detection Enviro...

Vue page monitoring user preview time function implementation code

A recent business involves such a requirement tha...

MySQL data loss troubleshooting case

Table of contents Preface On-site investigation C...