この例の主な目的は、Jquey の Draggable コントロールを使用することです。 使用する際は、まずJquery、Jquery-Ui、Draggableの3つのJを参照します。次に、対応するコードを js で記述します。関連するコードの手順については、プログラム内のコメントを参照してください。 ドラッグ可能の手順については、次を参照してください: http://docs.jquery.com/UI/API/1.8/Druggable ソース コード: コードをコピー コードは次のとおりです: <%@ 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>//イベント終了<br>stop: function(event, ui) { <br>EndDrag(event, ui) ); <br>} <br>}) <br>}); <br>//イベントメソッドの開始 <br>function StartDrag(event, ui) { <br>$("#StartDragInfo").html(" Start: Left: " ui.offset.left "Top: " ui.offset.top); <br>} <br>//イベントメソッド終了 <br>function EndDrag(event, ui) { <br>$(" #EndDragInfo") .html("End: Left: " ui.offset.left "Top: " ui.offset.top); <br>} <br> <%--ドラッグ可能なリファレンス マニュアル http://docs.jquery.com/UI/API/1.8 /ドラッグ可能-- %> <%--ドラッグ範囲--%> <%--ドラッグ開始時の情報を記録します--%> ドラッグ終了時の情報--%> <%--ドラッグされたオブジェクト--%> ファイル パッケージのダウンロード
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
