기능은 매우 간단하지만 매우 실용적이며, 코드도 더욱 간결해져서 더 이상 헛소리는 없을 것입니다 소스코드 제공: 코드 복사 코드는 다음과 같습니다. http://www.w3.org/1999/xhtml"> <br> *<br> {<br> 여백: 0px;<br> 패딩: 0px;<br> }<br> .드래그박스<br> {<br> 너비: 400px;<br> 높이: 200px;<br> 위치: 절대;<br> 최고: 40%;<br> 왼쪽: 40%;<br> 배경: #e8e8e8;<br> Z-색인: 8001;<br> }<br> .dragBox > div<br> {<br> 높이: 30px;<br> 커서: 이동;<br> 배경: #00ff21;<br> 위치: 상대;<br> } <p>.ui-마스크<br> {<br> 너비: 100%;<br> 높이: 100%;<br> 배경: #000;<br> 위치: 절대;<br> 상단: 0px;<br> Z-색인: 8000;<br> 불투명도: 0.4;<br> 필터: 알파(불투명도=40);<br> }<br> </스타일><br> <script src="framework/base/jquery-1.8.3.min.js"></script><br> <script type="text/javascript"></script><br> <script type="text/javascript"><br> $(함수 () {<br> var mouseOffx = 0;<br> var mouseOffy = 0;<br> var isDrag = false;<br> $(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) {<br> mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;<br> mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;<br> isDrag = true;<br> })<br> $(document).unbind(".click").on("mousemove", function (ev) {<br> var mourseX = ev.clientX, mourseY = ev.clientY;<br> var moveX = 0, moveY = 0;<br> if (isDrag === true) {<br> moveX = mourseX - mouseOffx;<br> moveY = mourseY - mouseOffy;<br> var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);<br> var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);<br> moveX = Math.min(maxX, Math.max(0, moveX));<br> moveY = Math.min(maxY, Math.max(0, moveY));<br> $(".dragBox").css({ "왼쪽": moveX, "top": moveY });<br> }<br> });<br> $(document).unbind(".click").on("mouseup", function () {<br> isDrag = 거짓;<br> });<br> });<br> <br> </머리><br> <br> 테스트 <br> <div class="ui-mask" id="mask" onselectstart="return false"></div><br> <div class="dragBox"><br> <div><br> </div><br> </div><br> </본문><br> </p> </div>
