이 기사의 예에서는 JavaScript를 사용하여 텍스트 및 이미지 드래그 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. JavaScript는 텍스트와 이미지의 드래그 앤 드롭 효과를 구현합니다 <br> *{패딩:0;여백:0;}<br> .tips{위치:절대;배경:#eee;}<br> </스타일><br> </머리><br> <br> <div class="tips" id="tips1" onmouseover="dragF.drag('tips1');"><br> <img src="/images/skinslogo.gif"><br>이미지를 드래그할 수 있습니다</div><br> <div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="http://www.jb51.net" target="_blank"> ;스크립트 홈</a><br />링크를 드래그할 수도 있습니다<br> </div><br> </본문><br> <script type="text/javascript"><br> var $id=function(id){return document.getElementById(id);}<br> var 드래그F={<br> 잠김:거짓,<br> lastObj:정의되지 않음,<br> 드래그:함수(obj){<br> $id(obj).onmousedown=function(e){<br> var e = e ? e : window.event;<br> if(!window.event) {e.preventDefault();}/* 라벨 방지<a href="/site/js-5791-1.html" target="_blank" a></a> dragF.locked=true;<br> $id(obj).style.position="절대";<br> $id(obj).style.zIndex="100";<br> if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 다중 요소 드래그는 마지막 요소 상태를 복원해야 함 */<br> DragF.lastObj.style.zIndex = "1";<br> }<br> DragF.lastObj=$id(obj);<br> var tempX=$id(obj).offsetLeft;<br> var tempY=$id(obj).offsetTop;<br> DragF.x=e.clientX;<br> DragF.y=e.clientY;<br> document.onmousemove=function(e){<br> var e = e ? e : window.event;<br> If(dragF.locked==false)는 false를 반환합니다.<br> $id(obj).style.left=tempX e.clientX-dragF.x "px";<br> $id(obj).style.top=tempY e.clientY-dragF.y "px";<br> If(window.event) {e.returnValue=false;}/* ie에서 a 및 img의 기본 이벤트 방지 */<br> }<br> document.onmouseup=function(){<br> DragF.locked=false;<br> }<br> }<br> }<br> }<br> <br> </div>
