JS-사례 - 브라우저 여백 50px 흡착을 끌어내지 않음
2954 단어 케이스
var div=document.querySelector("div");
div.addEventListener("mousedown",mouseMoveHandler);
var browerWidth = document.body.clientWidth ;
var browerHeight =document.body.clientHeight ;
function mouseMoveHandler(e) {
if(e.type==="mousedown"){
e.preventDefault();
document.point={
x:e.offsetX,
y:e.offsetY
};
document.div=this;
document.addEventListener("mousemove",mouseMoveHandler);
document.addEventListener("mouseup",mouseMoveHandler);
}else if(e.type==="mousemove"){
this.div.style.top=e.clientY-this.point.y+"px";
this.div.style.left=e.clientX-this.point.x+"px";
if(this.div.offsetLeft<0){
this.div.style.left=0+"px";
}
if(this.div.offsetTop<0){
this.div.style.top=0+"px";
}
if(this.div.offsetTop+this.div.clientHeight>browerHeight){
this.div.style.top=browerHeight-this.div.clientHeight+"px";
}
if(this.div.offsetLeft+this.div.clientWidth>browerWidth){
this.div.style.left=browerWidth-this.div.clientWidth+"px";
}
}else if(e.type==="mouseup"){
// if(e.clientY-this.point.y<50 && e.clientX-this.point.x<50){
// this.div.style.left=0+"px";
// this.div.style.top=0+"px";
// }
if(e.clientX-this.point.x<50){
this.div.style.left=0+"px";
}
if(e.clientY-this.point.y<50){
this.div.style.top=0+"px";
}
if(browerHeight-this.div.offsetTop-this.div.clientHeight<50){
this.div.style.top=browerHeight-this.div.clientHeight+"px";
}
if(this.div.offsetLeft+this.div.clientWidth>browerWidth-50){
this.div.style.left=browerWidth-this.div.clientWidth+"px";
}
//
this.removeEventListener("mousemove",mouseMoveHandler);
this.removeEventListener("mouseup",mouseMoveHandler);
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
obniz의 자작 케이스・Obniz의 케이스를 100균의 용기로 만들어 보았다. ・공작 아마추어인 나라도 자작할 수 있을 것 같다고 생각한 이유는 이하와 같은 점이 포인트라고 생각한다. 1. 전원과 IO 핀의 2 개소만 구멍을 뚫는 것만으...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
