let canMove = false
let x = 0, y = 0
$('.layer').mousedown(function (e) {
相对位置
x = e.pageX - $('.layer').offset().left
y = e.pageY - $('.layer').offset().top
canMove = true
})
$(window).mouseup(function () {
canMove = false
})
$(window).blur(function () {
失去焦点时触发
canMove = false
})
$(window).mousemove(function (e) {
阻止浏览器默认行为
e.preventDefault()
if (canMove) {
限制移动范围
let left = e.pageX - x
let top = e.pageY - y
let maxLeft = $(window).innerWidth() - $('.layer').innerWidth()
let maxTop = $(window).innerHeight() - $('.layer').innerHeight()
将初始值进行过滤,得到最终值
let result = $.filterLeftAndTop(left, top, maxLeft, maxTop)
$('.layer').css({
left: result.left,
top: result.top
})
}
})