Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
更新時(shí)間：2010年09月28日 22:54:00 作者：
使用時(shí)首先依次引用Jquery，Jquery-Ui ，Draggable三個(gè)Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說(shuō)明請(qǐng)看程序中的注釋。
本例主要目的是使用Jquey的Draggable控件。
使用時(shí)首先依次引用Jquery，Jquery-Ui ，Draggable三個(gè)Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說(shuō)明請(qǐng)看程序中的注釋。
關(guān)于 Draggable的說(shuō)明請(qǐng)參考：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);
},
//結(jié)束事件
stop: function(event, ui) {
EndDrag(event, ui);
}
})
});
//開始事件方法
function StartDrag(event, ui) {
$("#StartDragInfo").html("開始： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
//結(jié)束事件方法
function EndDrag(event, ui) {
$("#EndDragInfo").html("結(jié)束： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--Draggable參考手冊(cè)http://docs.jquery.com/UI/API/1.8/Draggable--%>
<%--拖動(dòng)的范圍--%>
<div id="DragArea" style="width: 500px; height: 500px; border: 1px solid blue">
<%--記錄拖動(dòng)開始時(shí)的信息--%>
<div id="StartDragInfo">
</div>
<%--記錄拖動(dòng)結(jié)束時(shí)的信息--%>
<div id="EndDragInfo">
</div>
<br />
<br />
<%--被拖動(dòng)的物體--%>
<img id="imgDrag" src="img/imgGreen.gif" />
</div>
</form>
</body>
</html>
文件打包下載
使用時(shí)首先依次引用Jquery，Jquery-Ui ，Draggable三個(gè)Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說(shuō)明請(qǐng)看程序中的注釋。
關(guān)于 Draggable的說(shuō)明請(qǐng)參考：http://docs.jquery.com/UI/API/1.8/Draggable
源碼：
復(fù)制代碼 代碼如下:
<%@ 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);
},
//結(jié)束事件
stop: function(event, ui) {
EndDrag(event, ui);
}
})
});
//開始事件方法
function StartDrag(event, ui) {
$("#StartDragInfo").html("開始： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
//結(jié)束事件方法
function EndDrag(event, ui) {
$("#EndDragInfo").html("結(jié)束： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--Draggable參考手冊(cè)http://docs.jquery.com/UI/API/1.8/Draggable--%>
<%--拖動(dòng)的范圍--%>
<div id="DragArea" style="width: 500px; height: 500px; border: 1px solid blue">
<%--記錄拖動(dòng)開始時(shí)的信息--%>
<div id="StartDragInfo">
</div>
<%--記錄拖動(dòng)結(jié)束時(shí)的信息--%>
<div id="EndDragInfo">
</div>
<br />
<br />
<%--被拖動(dòng)的物體--%>
<img id="imgDrag" src="img/imgGreen.gif" />
</div>
</form>
</body>
</html>
文件打包下載
您可能感興趣的文章:
- Windows Server 2012 R2 Standard搭建ASP.NET Core環(huán)境圖文教程
- asp.net core實(shí)現(xiàn)文件上傳功能
- ASP.NET Core配置教程之讀取配置信息
- ASP.NET 5已終結(jié)，迎來(lái)ASP.NET Core 1.0和.NET Core 1.0
- Win7旗艦版中的IIS配置asp.net的運(yùn)行環(huán)境配置教程(圖文教程+視頻)
- win7和win2008 r2下配置IIS7(ASP.net運(yùn)行環(huán)境)
- Win7中IIS的ASP.NET環(huán)境配置簡(jiǎn)潔版
- Win 2003中配置ASP.net環(huán)境
- win2008 r2 服務(wù)器環(huán)境配置(FTP/ASP/ASP.Net/PHP)
- win10下ASP.NET Core部署環(huán)境搭建步驟
相關(guān)文章
談?wù)凧query中的children find 的區(qū)別有哪些
這篇文章給大家介紹jquery中的children find 的區(qū)別，涉及到的知識(shí)點(diǎn)有jquery find children，感興趣的朋友一起學(xué)習(xí)jquery find children方面的知識(shí)吧2015-10-10
使用jquery實(shí)現(xiàn)圖文切換效果另加特效
白天活干完，弄個(gè)jquery仿凡客誠(chéng)品圖片切換的效果;以前寫的不是很好，今天重新做個(gè)jquery特效，其實(shí)很簡(jiǎn)單,感興趣的朋友可以了解下哦，希望本文對(duì)你有幫助2013-01-01
jquery中封裝了一些ajax請(qǐng)求的方法，很實(shí)用，整理出來(lái)與大家分享下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
JQuery 動(dòng)態(tài)擴(kuò)展對(duì)象之另類視角
大家都知道javascript是動(dòng)態(tài)語(yǔ)言，它對(duì)動(dòng)態(tài)的支持是與身俱來(lái)的。2010-05-05
這篇文章主要介紹了jQuery事件用法實(shí)例匯總,對(duì)事件的綁定及各類事件的用法做了較為詳盡的實(shí)例分析,有很好的借鑒價(jià)值,需要的朋友可以參考下2014-08-08
最常使用javascript的場(chǎng)合就是表單的驗(yàn)證，而jQuery作為一個(gè)優(yōu)秀的javascript庫(kù)，也提供了一個(gè)優(yōu)秀的表單驗(yàn)證插件——Validation。本文將詳細(xì)介紹validation插件。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要介紹了jquery判斷input值不為空的方法的相關(guān)資料,需要的朋友可以參考下2016-06-06
用jQuery模擬select下拉框的簡(jiǎn)單示例代碼
本篇文章主要是對(duì)用jQuery模擬select下拉框的簡(jiǎn)單示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淘寶商品圖片局部放大，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了BootStrap按鈕標(biāo)簽及基本樣式的相關(guān)資料，基本樣式包括顏色大小方面的知識(shí)，對(duì)bootstrap按鈕相關(guān)知識(shí)感興趣的朋友一起看看吧2016-11-11