本例主要目的是使用Jquey的Draggable控件。
使用時首先依次引用Jquery，Jquery-Ui ，Draggable三個Js。然後在js中編寫相應的代碼，相關代碼說明請看程序中的注釋。
關於 Draggable的說明請參考：http://docs.jquery.com/UI/API/1.8/Draggable
源碼：
代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryDrag._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/Draggable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//拖拽方法
$("#imgDrag").draggable({
//拖拽范圍
containment: "#DragArea",
//開始事件
start: function(event, ui) {
StartDrag(event, ui);
},
//結束事件
stop: function(event, ui) {
EndDrag(event, ui);
}
})
});
//開始事件方法
function StartDrag(event, ui) {
$("#StartDragInfo").html("開始： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
//結束事件方法
function EndDrag(event, ui) {
$("#EndDragInfo").html("結束： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--Draggable參考手冊http://docs.jquery.com/UI/API/1.8/Draggable--%>
<%--拖動的范圍--%>
<div id="DragArea" style="width: 500px; height: 500px; border: 1px solid blue">
<%--記錄拖動開始時的信息--%>
<div id="StartDragInfo">
</div>
<%--記錄拖動結束時的信息--%>
<div id="EndDragInfo">
</div>
<br />
<br />
<%--被拖動的物體--%>
<img id="imgDrag" src="img/imgGreen.gif" />
</div>
</form>
</body>
</html>
文件打包下載