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
Table of contents 1. Object 1.1 What is an object...
In the latest version of Ubuntu, users no longer ...
This blog post is about a difficulty encountered ...
In real life, a lock is a tool we use when we wan...
I have searched various major websites and tested...
Table of contents 1.mysqldump Execution process: ...
When using MySQL, many developers often perform f...
Preface According to the scope of locking, locks ...
MySQL InnoDB monitoring (system layer, database l...
1. Explanation of provide and inject Provide and ...
1. There are two ways to modify global variables ...
Problem description: structure: test has two fiel...
Question: Is the origin server unable to find a r...
Look at the solution first #------------The probl...
If your DOCTYPE is as follows: Copy code The code ...