<div id="div1"></div>
#div1{
width:100px;
height: 100px;
background:red;
position: absolute;
}
window.onload = function() {
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0;
//1. 鼠标按下
oDiv.onmousedown = function(ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
//2. 鼠标移动
document.onmousemove = function(ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if (l < 0) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if (t < 0) {
t = 0;
} else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
//3.松开鼠标
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
//阻止默认事件
return false;;
};
};
鼠标事件点击拖拽div
猜你喜欢
转载自blog.csdn.net/qq_37995109/article/details/85104963
今日推荐
周排行