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:
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:
|
<<: How to implement Linux automatic shutdown when the battery is low
>>: Complete steps of centos cloning linux virtual machine sharing
introduction When I was learning more about datab...
Management of input and output in the system 1. U...
Table of contents 1. HTTP Range Request 1.1 Range...
1. First, an error message is reported when assoc...
This article shares the specific code for JavaScr...
Question How to access the local database in Dock...
0x0 Parameter verification Most of the parameter ...
Table of contents Method 1: Routing meta informat...
Table of contents 1. Live broadcast effect 2. Ste...
1. Installation Environment Computer model: Lenov...
Despite props and events, sometimes you still nee...
Table of contents Preface text 1. Closure 1.1 Wha...
1. AIDE AIDE (Advanced Intrusion Detection Enviro...
A recent business involves such a requirement tha...
Table of contents Preface On-site investigation C...