;
간단한 드래그 원리의 예<br>< ;style type="text/css"> <br>#drag{width:400px;height:300px;Background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg ); 커서:이동;위치:absolute;top:100px;왼쪽:100px;border:solid 1px #ccc;} <br>h2{color:#fff;배경: 없음 반복 스크롤 0 0 rgba(16, 90, 31 , 0.7 );color:#FFFFFF;height:40px;line-height:40px;margin:0;} <br></style> <br><script src="http://ajax.googleapis.com /ajax /libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <br><script type="text/javascript"> <br>$ (함수 (){ <br>/*---------------드래그 효과---------------- <br>*원리: 마크 드래그 상태 드래그 , 좌표 위치 iX, iY <br>* mousedown:fn(){드래깅 = true, 시작 좌표 위치 기록, 마우스 캡처 설정} <br>* mouseover:fn(){드래깅 = true인 경우 판단, 현재 좌표 위치 - 시작 좌표 위치를 기록하고 절대 위치에 있는 요소의 차이를 구합니다.} <br>* mouseup:fn(){draging = false, 버블링을 방지하려면 마우스 캡처를 해제합니다.} <br>*/ <br>var dragging = false; <br>var iX, iY; <br>$("#drag").mousedown(function(e) { <br>드래깅 = true; <br>iX = e.clientX - this.offsetLeft; <br>iY = e.clientY - this.offsetTop; <br>this.setCapture && this.setCapture() <br>return false <br>}); 🎜>if(드래깅) { <br>var e = e || window.event; <br>var oX = e.clientX - <br>var oY = e.clientY - iY; #drag" ).css({"left":oX "px", "top":oY "px"}); <br> false 반환; <br>} <br>}; <br>$(문서) .mouseup( function(e) { <br> 끌기 = false; <br>$("#drag")[0].releaseCapture(); <br>e.cancelBubble = true; <br>}) <br> <br> }) <br><br></script> <br><br><body> <br><div id="drag"> <h2>나를 드래그하세요</h2> <br></body> <br><br>
