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


Posted in Javascript onSeptember 28, 2010

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

文件打包下载
Javascript 相关文章推荐
javascript常用的正则表达式实例
May 15 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JQuery学习总结【二】
Dec 01 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
浅析Vue 生命周期
Jun 21 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
JS实现简单日历特效
Jan 03 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 #Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 #Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 #Javascript
封装的原生javascript弹出层代码
Sep 24 #Javascript
js最简单的拖拽效果实现代码
Sep 24 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
深入理解php的MySQL连接类
2013/06/07 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python数据处理实战(必看篇)
2017/06/11 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
联谊活动策划书
2014/01/26 职场文书
合作经营协议书范本
2014/04/17 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
Python实现打乒乓小游戏
2021/09/25 Python