Jquey拖拽控件Draggable使用方法(asp.net环境)


本例主要目的是使用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>

文件打包下载



相关阅读:
Discuz!NT 论坛整合ASP程序论坛教程
javascript汉字转拼音的代码
js实现网页检测是否安装了 Flash Player 插件
PHP+JS+rsa数据加密传输实现代码
Jquery实战_读书笔记2 选择器
PHP 模板高级篇总结
走近GNOME Do 0.8.1:Linux上快速启动程序
怎么知道Vista系统是否支持Aero特效
创建一个复制UBB软件信息的链接或按钮的js代码
最近整理的一份CSS文字隐藏的demo
VML应用实例大全
Windows7系统是有史以来最安全的操作系统
同台服务器使用缓存APC效率高于Memcached的演示代码
javascript+mapbar实现地图定位
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4