div在屏幕任意位置拖动
主要就是三点:
1,获取鼠标按下时的位置;
2,获取鼠标移动后的位置;
3,两者相减就是div的位置;
js代码如下:
// 获取屏幕的高宽度
let cw = $(window).width();
let ch = $(window).height();
// 鼠标按下时获取鼠标在屏幕的位置
$(".box").mousedown(function(e){
e = e || window.event;
// 获取鼠标在元素上的位置(鼠标按下时在元素上得位置)
let X = e.clientX - $(".box").offset().left;
let Y = e.clientY - $(".box").offset().top;
$(".box").mousemove(function(e){
console.log(cw ,ch);
e = e || window.event;
let x = e.clientX - X;
let y = e.clientY - Y;
if(x<0)x=0;
if(y<0)y=0;
if(x + $('.box').width() > cw) x = cw-$('.box').width();
if(y +$('.box').height() > ch) y = ch-$('.box').height();
$('.box').css({
'left':x,
'top':y
})
})
});
// 鼠标抬起事件
$(document).mouseup(function(){
$(".box").unbind("mousemove")
})