directives: {
go: {
inserted(el) {
//给el设置绝对定位
el.style.position = 'absolute'
//给el添加鼠标按下的事件
el.onmousedown = function (event) {
//用视口的位置减去相对于父元素的位置得到一个距离差
var sx = event.clientX - el.offsetLeft
var sy = event.clientY - el.offsetTop
//当鼠标按下移动的时候求出一个新的位置
document.onmousemove = function (event) {
//获取大盒子的宽度和高度
var bigW = document.getElementById('box').offsetWidth
var elW = el.offsetWidth
var bigH = document.getElementById('box').offsetHeight
var elH = el.offsetHeight
var x = event.clientX - sx
if (x > bigW - elW) {
x = bigW - elW
}
if (x < 0) {
x = 0
}
var y = event.clientY - sy
if (y > bigH - elH) {
y = bigH - elH
}
if (y < 0) {
y = 0
}
//给el赋值
el.style.left = x + 'px'
el.style.top = y + 'px'
}
//当鼠标弹起的时候移除move事件
el.onmouseup = function () {
document.onmousemove = null
}
}
},
},
},
}
自定义指令(拖拽)
最新推荐文章于 2024-06-19 12:15:24 发布