Jquey拖拽控件Draggable使用方法(asp.net环境)
更新时间：2010年09月28日 22:54:00 作者：
使用时首先依次引用Jquery，Jquery-Ui ，Draggable三个Js。然后在js中编写相应的代码，相关代码说明请看程序中的注释。
本例主要目的是使用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>
文件打包下载
使用时首先依次引用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>
文件打包下载
您可能感兴趣的文章:
- Windows Server 2012 R2 Standard搭建ASP.NET Core环境图文教程
- asp.net core实现文件上传功能
- ASP.NET Core配置教程之读取配置信息
- ASP.NET 5已终结，迎来ASP.NET Core 1.0和.NET Core 1.0
- Win7旗舰版中的IIS配置asp.net的运行环境配置教程(图文教程+视频)
- win7和win2008 r2下配置IIS7(ASP.net运行环境)
- Win7中IIS的ASP.NET环境配置简洁版
- Win 2003中配置ASP.net环境
- win2008 r2 服务器环境配置(FTP/ASP/ASP.Net/PHP)
- win10下ASP.NET Core部署环境搭建步骤
相关文章
谈谈Jquery中的children find 的区别有哪些
这篇文章给大家介绍jquery中的children find 的区别，涉及到的知识点有jquery find children，感兴趣的朋友一起学习jquery find children方面的知识吧2015-10-10
白天活干完，弄个jquery仿凡客诚品图片切换的效果;以前写的不是很好，今天重新做个jquery特效，其实很简单,感兴趣的朋友可以了解下哦，希望本文对你有帮助2013-01-01
jquery中封装了一些ajax请求的方法，很实用，整理出来与大家分享下，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-03-03
大家都知道javascript是动态语言，它对动态的支持是与身俱来的。2010-05-05
这篇文章主要介绍了jQuery事件用法实例汇总,对事件的绑定及各类事件的用法做了较为详尽的实例分析,有很好的借鉴价值,需要的朋友可以参考下2014-08-08
最常使用javascript的场合就是表单的验证，而jQuery作为一个优秀的javascript库，也提供了一个优秀的表单验证插件——Validation。本文将详细介绍validation插件。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jquery判断input值不为空的方法的相关资料,需要的朋友可以参考下2016-06-06
本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了jquery实现淘宝商品图片局部放大，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了BootStrap按钮标签及基本样式的相关资料，基本样式包括颜色大小方面的知识，对bootstrap按钮相关知识感兴趣的朋友一起看看吧2016-11-11
最新评论