鼠标拖拽调整div大小

news/2024/11/18 4:22:47/

鼠标拖拽调整div大小

实现思路

  • 根据鼠标位置改变鼠标样式
  • 当鼠标在div的边缘和四个角时显示不同的样式，通过cursor修改
  • 当鼠标在div的边缘和四个角按下时记录具体坐标点位置， 并开始根据鼠标的移动修改div的尺寸
  • 鼠标松开时结束尺寸修改

代码实现

<!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>//需要调整尺寸的divlet c = document.getElementById('container')// body监听移动事件document.getElementById('body').addEventListener('mousemove', move)// 鼠标按下事件c.addEventListener('mousedown', down)// 鼠标松开事件document.getElementById('body').addEventListener('mouseup', up)// 是否开启尺寸修改let resizeable = false// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置let clientX, clientY// div可修改的最小宽高let minW = 8, minH = 8// 鼠标按下时的位置，使用n、s、w、e表示let direc = ''// 鼠标松开时结束尺寸修改function up() {resizeable = false}// 鼠标按下时开启尺寸修改function down(e) {let d = getDirection(e)// 当位置为四个边和四个角时才开启尺寸修改if (d !== '') {resizeable = truedirec = dclientX = e.clientXclientY = e.clientY}}// 鼠标移动事件function move(e) {let d = getDirection(e)let cursorif (d === '') cursor = 'default';else cursor = d + '-resize';// 修改鼠标显示效果c.style.cursor = cursor;// 当开启尺寸修改时，鼠标移动会修改div尺寸if (resizeable) {// 鼠标按下的位置在右边，修改宽度if (direc.indexOf('e') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'clientX = e.clientX}// 鼠标按下的位置在上部，修改高度if (direc.indexOf('n') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在底部，修改高度if (direc.indexOf('s') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在左边，修改宽度if (direc.indexOf('w') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'clientX = e.clientX}}}// 获取鼠标所在div的位置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>

功能增强，通过八个点拖动元素尺寸

在这里插入图片描述

<!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;position: relative;margin: 40px;}.point{display: none;}#container:hover .point{display: block;width: 4px;height: 4px;border-radius: 2px;border: #08253b 1px solid;position: absolute;}.top{top: -2px;left: 50%;}.bottom{bottom: -2px;left: 50%;}.left{left: -2px;top: 50%;}.right{right: -2px;top: 50%;}.top-left{top: -2px;left: -2px;}.bottom-left{bottom: -2px;left: -2px;}.top-right{top: -2px;right: -2px;}.bottom-right{bottom: -2px;right: -2px;}.item {cursor: default;width: 100%;height: 100%;background: #757575;}</style>
</head>
<body id="body">
<div id="container"><div class="item"></div><div class="point top"></div><div class="point left"></div><div class="point right"></div><div class="point bottom"></div><div class="point top-left"></div><div class="point top-right"></div><div class="point bottom-left"></div><div class="point bottom-right"></div>
</div>
<script>//需要调整尺寸的divlet c = document.getElementById('container')// body监听移动事件document.getElementById('body').addEventListener('mousemove', move)// 鼠标按下事件c.addEventListener('mousedown', down)// 鼠标松开事件document.getElementById('body').addEventListener('mouseup', up)// 是否开启尺寸修改let resizeable = false// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置let clientX, clientY// div可修改的最小宽高let minW = 8, minH = 8// 鼠标按下时的位置，使用n、s、w、e表示let direc = ''// 鼠标松开时结束尺寸修改function up() {resizeable = false}// 鼠标按下时开启尺寸修改function down(e) {let d = getDirection(e)// 当位置为四个边和四个角时才开启尺寸修改if (d !== '') {resizeable = truedirec = dclientX = e.clientXclientY = e.clientY}}// 鼠标移动事件function move(e) {console.log(e);let d = getDirection(e)let cursorif (d === '') cursor = 'default';else cursor = d + '-resize';// 修改鼠标显示效果c.style.cursor = cursor;// 当开启尺寸修改时，鼠标移动会修改div尺寸if (resizeable) {// 鼠标按下的位置在右边，修改宽度if (direc.indexOf('e') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'clientX = e.clientX}// 鼠标按下的位置在上部，修改高度if (direc.indexOf('n') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在底部，修改高度if (direc.indexOf('s') !== -1) {c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'clientY = e.clientY}// 鼠标按下的位置在左边，修改宽度if (direc.indexOf('w') !== -1) {c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'clientX = e.clientX}}}// 获取鼠标所在div的位置function getDirection(ev) {let dir = '';if (ev.target.className.indexOf('top') >= 0) dir += 'n';else if (ev.target.className.indexOf('bottom') >= 0) dir += 's';if (ev.target.className.indexOf('left') >= 0) dir += 'w';else if (ev.target.className.indexOf('right') >= 0) dir += 'e';return dir;}
</script>
</body>
</html>

http://www.ppmy.cn/news/327694.html

相关文章

基于html+css的图展示121

基于html+css的图展示121

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…
阅读更多...
微信小程序之原生鼠标拖动图片效果

微信小程序之原生鼠标拖动图片效果

先看看效果&#xff1a; 思路就是&#xff1a;监听鼠标移动的位置&#xff0c;用position:absolute的属性&#xff0c;实时改变left,top这两个值。 看看源码&#xff1a; wxml <view classdraw-content><image src/images/look2.png class"look-image"…
阅读更多...
java 监听鼠标点击_java 事件监听 - 鼠标

java 监听鼠标点击_java 事件监听 - 鼠标

java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1、MouseListener 普通的鼠标操作 //2、MouseMotionListener 鼠标的拖拽、移动 import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Index extends JFrame{//设…
阅读更多...
java 中鼠标事件_Java中的鼠标事件

java 中鼠标事件_Java中的鼠标事件

任何组件上都可以发生鼠标事件，如：鼠标进进组件、退出组件、在组件上方单击鼠标、拖动鼠标等都发生鼠标事件，也就是说，组件可以成为发生鼠标事件的事件源。 1 使用MouseListener接口处理鼠标事件 使用MouseListener接口可以处理5种操纵发生的鼠标事件： (1)在事件源上按下鼠…
阅读更多...
css鼠标变成小手(css中鼠标悬停是为小手)

css鼠标变成小手(css中鼠标悬停是为小手)

CSS控制鼠标样式变换如何写代码呢&#xff1f; 代码&#xff1a;&#xff1a;p stylecursor: crosshair演示&#xff1a;定位指示/p如果需要将鼠标变换成帮助状态的时候。代码&#xff1a;p stylecursor: help演示&#xff1a;帮助/p当然这些只是一些常见的比较实用的代码。我们…
阅读更多...
C++ 获取鼠标点击位置

C++ 获取鼠标点击位置

C 获取鼠标点击位置 1.检测鼠标点击事件 GetAsyncKeyState函数可以检测按键点击事件 这里是它的函数原型&#xff1a; SHORT_stdcall GetAsyncKeyState(int vKey);我们首先要根据这个函数定义一个宏KEY_DOWN&#xff0c;这样可以方便以后的调用 #define KEY_DOWN(VK_NONAME…
阅读更多...
【帅琪达】IDEA通过设置（Ctrl + 鼠标滚轮）来改变代码字体大小

【帅琪达】IDEA通过设置（Ctrl + 鼠标滚轮）来改变代码字体大小

方法一&#xff1a; 1、进入设置页面 File ---> Settings... 首先点击 File&#xff0c;然后点击弹出界面里面的 Settings... 或者直接使用 CtrlAltS 快捷键&#xff0c;便可进入到设置界面 2、进行设置 ① 找到 Setting 里面的 Editor ---> General。可直接搜索 Gen…
阅读更多...
使用 CSS 创建自定义鼠标光标

使用 CSS 创建自定义鼠标光标

作为您的用户和您的网站之间的中间人&#xff0c;光标可以限制或大大增强您的用户体验您的网站的方式。这就是为什么时尚、有意设计的自定义光标已成为当今 UI 和 UX 的重要组成部分。 自定义光标是一个以引人入胜的方式为用户提供指导并在您的网站上为他们创造令人难忘的沉浸…
阅读更多...
最新文章

Copyright @ 2022~2023