javascript盒子的拖拽和缩放
思路
拖拽
拖拽实际就是改变盒子的
left
和top
.给盒子来个固定定位,鼠标按下并滑动时获取鼠标的实时位置,改变盒子的位置
缩放
缩放实际就是改变盒子的
width
和height
,鼠标按下并滑动时获取鼠标的位置,得到鼠标移动的位置再加上原来的宽高
上代码
拖拽
简单说明一下:
getCss
: 获取盒子的left
和top
resize事件
:窗口改变大小会影响移动的位置mousedown事件'
:当前盒子被按住时获取鼠标初始位置,获取盒子宽高(和盒子缩放有关)mousemove事件
:鼠标移动获取实时位置,实时改动盒子的left
和top
mouseup事件
:鼠标弹起
里面的变量有点多,自己看,理解起来没那么难
/**
*
* @param {目标盒子} drag
* @param {目标盒子的父盒子,限制盒子移动的空间} fatherBox
*/
export function dragBox(drag, fatherBox) {
function getCss(ele) {
let { left, top } = document.defaultView.getComputedStyle(ele)
return {
left: left.replace('px', ''), top: top.replace('px', '')
}
}
let initX
let initY
let dragable = false
let { left, top } = getCss(drag)
let wrapLeft = left
let wrapRight = top
let clientHeight = document.body.clientHeight
// 可以把这四个限制写在一个对象里面,见下面zoom.js
let mostLeft = fatherBox.offsetLeft
let mostRight
let mostTop = 0
let mostBottom
// 改变页面宽高触发
window.addEventListener('resize', function(e) {
clientHeight = document.body.clientHeight
let { width, height } = drag.style
mostLeft = fatherBox.offsetLeft
mostRight = fatherBox.offsetLeft fatherBox.clientWidth - width.replace('px', '')
mostBottom = clientHeight - height.replace('px', '')
})
drag.addEventListener('mousedown', function(e) {
dragable = true
let { width, height } = drag.style
mostRight = fatherBox.offsetLeft fatherBox.clientWidth - width.replace('px', '')
mostBottom = clientHeight - height.replace('px', '')
initX = e.clientX
initY = e.clientY
}, false)
document.addEventListener('mousemove', function(e) {
if(dragable === true) {
let nowX = e.clientX
let nowY = e.clientY
let disX = nowX - initX
let disY = nowY - initY
let left = wrapLeft disX
let top = wrapRight disY
// 超出限制时判断
left = left < mostLeft ? mostLeft : left
left = left > mostRight ? mostRight : left
top = top < mostTop ? mostTop : top
top = top > mostBottom ? mostBottom : top
drag.style.left = left 'px'
drag.style.top = top 'px'
}
})
document.addEventListener('mouseup', function(e) {
dragable = false
let { left, top } = getCss(drag)
wrapLeft = left
wrapRight = top
document.onmousemove = null
document.onmouseup = null
window.onresize = null
}, false)
}
缩放
缩放就比拖拽简单很多,因为不会因为页面大小变化而改变范围,如果你上面的都看懂了,下面的就更容易看懂了
通常目标盒子会放在 上, 下, 左, 右, 左上, 右上, 左下, 右下
/**
*
* @param {目标盒子} zoom
* @param {需要改变宽高的盒子} fatherBox
*/
export function zoomBox(zoom, fatherBox) {
let zoomable = false
let initX
let initY
let { width, height } = fatherBox.style
let fatherWidth = width.replace('px', '')
let fatherHeight = height.replace('px', '')
let limit = {
MAX_WIDTH: 600,
MIN_WIDTH: 300,
MAX_HEIGHT: 800,
MIN_HEIGHT: 400
}
zoom.addEventListener('mousedown', function(e) {
e.stopPropagation()
zoomable = true
let { width, height } = fatherBox.style
fatherWidth = width.replace('px', '')
fatherHeight = height.replace('px', '')
initX = e.clientX
initY = e.clientY
}, false)
document.addEventListener('mousemove', function(e) {
if(zoomable === true) {
let nowX = e.clientX
let nowY = e.clientY
let disX = nowX - initX
let disY = nowY - initY
let nowWidth = fatherWidth disX
let nowHeight = fatherHeight disY
if(nowWidth > limit.MAX_WIDTH) {
nowWidth = limit.MAX_WIDTH
}
if(nowWidth < limit.MIN_WIDTH) {
nowWidth = limit.MIN_WIDTH
}
if(nowHeight > limit.MAX_HEIGHT) {
nowHeight = limit.MAX_HEIGHT
}
if(nowHeight < limit.MIN_HEIGHT) {
nowHeight = limit.MIN_HEIGHT
}
fatherBox.style.width = nowWidth 'px'
fatherBox.style.height = nowHeight 'px'
}
})
document.addEventListener('mouseup', function(e) {
zoomable = false
}, false)
}
用法
直接再页面中引入方法,找好目标盒子和父盒子.调用方法就行了
/*
<div id='dragFather'>
<div id='dragBox'></div>
</div>
*/
import { dragBox } from '@/util/drag'
dragBox(document.querySelector('#dragBox'), document.querySelector('#dragFather'))
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeifhc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01