JavaScript 拖拽效果-动画
小于 1 分钟约 137 字
JavaScript 拖拽效果-动画
鼠标按下 onmousedown,onmousedown 里边鼠标移动 onmousemove,鼠标释放 onmouseup
var oDiv = document.getElementById('box');
var disX = (disY = 0);
oDiv.onmousedown = function (ev) {
var ev = ev || event;
disX = ev.offsetX;
disY = ev.offsetY;
document.onmousemove = function (ev) {
var ev = ev || event;
var l = ev.clientX - disX;
var t = ev.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;
}
// 吸附效果
/* if(l <= 100){
l = 0;
}else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth - 100){
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';
};
document.onmouseup = function () {
this.onmousemove = null;
this.onmouseup = null;
};
};