拖拽的效果
当鼠标按下时
并且鼠标移动时
var oDiv = document.querySelector('div');
在div移动之前,先记录原始的定位数据
var oldTop = window.getComputedStyle(oDiv).top;
var oldLeft = window.getComputedStyle(oDiv).left;
当鼠标按下时,鼠标移动,添加事件
window.onmousedown = function(){
window.onmousemove = function(e){
// 将鼠标的坐标,作为div定位的数值,定位的是中心的位置
oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px' ;
oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
}
}
当鼠标抬起时,鼠标移动,赋值null,就没有事件执行了
window.onmouseup = function(){
window.onmousemove = null;
// 可以再给div定义,定位位置,可以返回原始位置
// 也在函数之外,记录存储原始位置
oDiv.style.left = oldLeft;
oDiv.style.top = oldTop;
}
如果想要鼠标移动的快点 把 oDiv 改变成 window 或者 document
先 鼠标移动,里面定义鼠标按下,抬起
鼠标移动时,执行鼠标按下,鼠标按下,计算机只会触发一次
鼠标按下,即时是一直按,只会触发一次
定义的程序,只会回执一次
window.onmousemove = function(){
window.onmousedown = function(){
console.log(123);
}
}
按下的时候,执行鼠标移动
鼠标移动会一直触发,移动中定义的程序,会一直执行
window.onmousedown = function(){
window.onmousemove = function(){
console.log(456);
}
}
JS-拖拽效果
猜你喜欢
转载自blog.csdn.net/DcTbnk/article/details/105280905
今日推荐
周排行