div의 드래그 가능 범위를 지정한 요소로 한정하면

만약div의 드래그 가능 범위를 지정한 요소 안에 한정한다면: 드래그 효과는 모두가 비교적 익숙하지만 보통 드래그 범위를 한정한다. 하나의 실례 코드를 통해div의 드래그를 지정한 요소 범위에 한정하는 방법을 소개한다. 코드의 실례는 다음과 같다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>    </title> 
<style type="text/css">
#box{
  width:400px;
  height:300px;
  background-color:red;
  margin:0px auto;
  position:relative;
}
#drag{
  width:50px;
  height:50px;
  background:green;
  position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var odrag=document.getElementById("drag");
  var flag=false;
  var x,y;
  var ol,ot;
  odrag.onmousedown=function(ev){
    var ev=window.event||ev;
    flag=true;
    x=ev.clientX;
    y=ev.clientY;
    ol=odrag.offsetLeft;
    ot=odrag.offsetTop;
  }
  document.onmousemove=function(ev){
    if(flag==false) return;
    var ev=window.event||ev;
    var _x,_y;
    _x=ev.clientX-x+ol;
    _y=ev.clientY-y+ot;
    if(_x<0) _x=0;
    if(_y<0) _y=0;
    if(_x>obox.offsetWidth-odrag.offsetWidth) _x=obox.offsetWidth-odrag.offsetWidth;
    if(_y>obox.offsetHeight-odrag.offsetHeight) _y=obox.offsetHeight-odrag.offsetHeight;
         
     odrag.style.left=_x+"px";
     odrag.style.top=_y+"px";
  }
  document.onmouseup=function(){flag=false;}
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="drag"></div>
</div>
</body> 
</html>

상기 코드는 우리의 요구를 실현시켰다. 지정된 녹색div의 드래그 범위를 빨간색div 안에 한정할 수 있다. 다음은 그 실현 과정을 소개한다.하나.코드 설명: 1.window.onload=function () {}, 문서 내용을 완전히 불러온 다음 함수의 코드를 실행합니다.2.var obox=document.getElementById ("box"), id 속성 값을 box 요소 대상으로 가져옵니다.3.var odrag=document.id 속성을 가져오면 drag의 요소 객체가 되는 getElementById("drag")4. var flag=false, 변수 flag을 선언하고 초기 값을 false로 지정합니다. 이것은 드래그할 수 있는지 여부를 표시하는 데 사용되며,false는 드래그할 수 없고,true는 드래그할 수 있습니다.5.var x, y, 마우스를 눌렀을 때 마우스 포인터가 브라우저 클라이언트 구역에 있는 좌표를 저장하는 두 변수를 설명합니다.6.var ol,ot, 녹색 div 거리, 빨간색 div 거리를 저장하는 두 변수를 설명합니다.7.odrag.onmousedown=function(ev) {}, 녹색div에 onmousedown 이벤트 처리 함수를 등록하고 ev는 이벤트 대상입니다.8.var ev=window.이벤트 |||ev, 이벤트 대상의 호환성 처리.9.flag=true, true로 설정합니다. 즉 마우스가 녹색div에서 눌려야 드래그할 수 있습니다.10.x=ev.clientX, 마우스를 눌렀을 때, 마우스 포인터는 브라우저 클라이언트 왼쪽에서 떨어집니다.11.y=ev.clientY, 마우스를 눌렀을 때, 마우스 포인터가 브라우저 클라이언트 구역의 맨 위에 있는 거리입니다.12.ol=odrag.offsetLeft, 마우스를 눌렀을 때 녹색 div의 왼쪽 가장자리 거리 빨간색 div 왼쪽 거리입니다.13.ot=odrag.offsetTop, 마우스를 눌렀을 때 녹색 div의 위쪽 가장자리 거리 빨간색 div 위쪽 거리입니다.14.document.onmousemove=function(ev) {}, 문서 등록을 위한 onmousemove 이벤트 처리 함수입니다. 많은 친구들이 왜 문서 대신 문서 파일에 등록을 해야 하는지 알 수 있습니다. 이것은 마우스를 드래그하는 과정에서 마우스 포인터가odrag에서 이동하여 드래그가 무효화되는 것을 방지하기 위해서입니다.15.if(flag=false)return, flag 값이false이면 바로 튀어나옵니다.16.var ev=window.이벤트 |||ev, 이벤트 대상의 호환성 처리.17.var _x,_y, 녹색div의left와 top 속성 값을 저장하는 두 부분 변수를 설명합니다.18._x=ev.clientX-x+ol, 드래그 과정에서left 속성 값, 수학 문제를 가져옵니다.19._y=ev.clientY-y+ot, 드래그 과정 중 top 속성 값, 수학 문제를 가져옵니다.20.if(_x<0) _x=0으로 왼쪽 가장자리를 넘지 않도록 합니다.21.if(_y<0) _y=0으로 위쪽 가장자리를 넘지 않도록 합니다.22.if(_x>obox.offsetWidth-odrag.offsetWidth) _x=obox.offsetWidth-odrag.오른쪽 가장자리를 넘지 않도록 offsetWidth23.if(_y>obox.offsetHeight-odrag.offsetHeight) _y=obox.offsetHeight-odrag.offsetHeight, 아래쪽 가장자리를 넘지 않도록 합니다.24.odrag.style.left=_x+"px",odrag.style.top=_y+ "px"는 녹색div의left와 top 값을 설정합니다.25.document.onmouseup=function(){flag=false;},마우스를 놓으면 flag이false로 설정됩니다.둘.1.onmousedown 이벤트는javascript의 onmousedown 이벤트 1장을 참조할 수 있습니다. 2.var ev=window.이벤트||ev는 var ev=window를 참조할 수 있습니다.이벤트|||ev의 역할은 무엇입니까? 3.clientX는javascript의clientX 이벤트 속성 1장을 참조할 수 있습니다. 4.offsetLeft는scrollTop,offsetHeight,offsetTop 등 속성 용법을 참고하여 한 장을 상세하게 설명할 수 있다.5. 이벤트 거품은 자바스크립트 이벤트 거품을 참고하여 간단하게 한 장을 소개할 수 있다. 6.onmousemove 이벤트는javascript의 onmousemove 이벤트 1장을 참조할 수 있습니다. 7.onmouseup 이벤트는javascript의 onmouseup 이벤트 1장을 참조할 수 있습니다.
원래 주소:http://www.softwhy.com/forum.php?mod=viewthread&tid=11818
자세한 내용은 다음을 참조하십시오.http://www.softwhy.com/javascript/

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

div의 드래그 가능 범위를 지정한 요소로 한정하면

좋은 웹페이지 즐겨찾기