Jquey拖拽控件Draggable使用方法(asp.net环境)
2010-09-28 00:00
676 查看
本例主要目的是使用Jquey的Draggable控件。
使用时首先依次引用Jquery,Jquery-Ui ,Draggable三个Js。然后在js中编写相应的代码,相关代码说明请看程序中的注释。
关于 Draggable的说明请参考:http://docs.jquery.com/UI/API/1.8/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>
文件打包下载
相关文章推荐
- Jquey拖拽控件Draggable使用方法(asp.net环境)
- 表单验证ASP.NET RequiredFieldValidator 控件使用方法及使用实例
- ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法
- ASP.NET中MultiView和View选项卡控件的使用方法
- Asp.net 使用Ajax 控件访问服务端的方法与,服务端访问客户端的方法
- ASP.NET 文字编辑控件 KindEditor使用方法
- ASP.NET Substitution 控件的使用方法
- ASP.NET中 TextBox 文本输入框控件的使用方法
- ASP.NET中HiddenField隐藏域控件的使用方法
- ASP.NET Calendar日历(日期)控件使用方法
- asp.net 打印控件使用方法
- asp.net控件开发基础(2) ----------明白使用Render方法呈现自定义控件
- ASP.NET-AspNetPager分页控件完整使用方法
- ASP.NET中广告控件AdRotator的使用方法。
- ASP.NET文件上传控件Uploadify的使用方法
- ASP.NET六大常用验证控件的使用方法
- ASP.NET中 RadioButtonList 单选按钮组控件的使用方法
- 关于asp.net网站发布后,使用登录控件和注册控件时出现“数据库只读,无法进行数据更新”的解决方法
- 使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
- ASP.NET-AspNetPager分页控件完整使用方法