이 예제의 주요 목적은 Jquey의 Draggable 컨트롤을 사용하는 것입니다. 사용 시 먼저 Jquery, Jquery-Ui, Draggable의 세 가지 J를 참조하세요. 그런 다음 js에 해당 코드를 작성합니다. 관련 코드 지침은 프로그램의 주석을 참조하세요. Draggable에 대한 지침은 다음을 참조하세요. http://docs.jquery.com/UI/API/1.8/Draggable 소스 코드: 코드 복사 코드는 다음과 같습니다. <%@ Page Language="C#" AutoEventWireup= "true" CodeBehind=" Default.aspx.cs" Inherits="JqueryDrag._Default" %> < ;head runat="서버 "> <br><script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"> <스크립트 유형 ="text/javascript" src="js/Draggable.js"> <br>$(document).ready(function() { <br>// 드래그 방법<br>$("#imgDrag").draggable({ <br>//드래그 범위<br>containment: "#DragArea", <br>//이벤트 시작<br>start : function(event , ui) { <br>StartDrag(event, ui); <br>}, <br>//End event<br>stop: function(event, ui) { <br>EndDrag(event, ui) ); <br>} <br>}) <br>}); <br>//이벤트 메소드 시작 <br>function StartDrag(event, ui) { <br>$("#StartDragInfo").html(" 시작: 왼쪽: " ui.offset.left "위: " ui.offset.top); <br>} <br>//End 이벤트 메서드 <br>function EndDrag(event, ui) { <br>$(" #EndDragInfo") .html("끝: 왼쪽: " ui.offset.left "위: " ui.offset.top); <br>} <br> < 본문> <%--드래그 가능한 참조 매뉴얼 http://docs.jquery.com/UI/API/1.8 /Draggable-- %> <%--드래그 범위--%> <%--드래그 시작 시 정보 기록--%> <%--기록 드래그 종료 시 정보--%> <%--드래그된 개체--%>