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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
Promise.all中对于reject的处理方法
Aug 01 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
如何把PHP转成EXE文件
2006/10/09 PHP
桌面中心(三)修改数据库
2006/10/09 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript读写json示例
2014/04/11 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Python如何读写字节数据
2020/08/05 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
火山动力Java笔试题
2014/06/26 面试题
法人代表任命书范本
2014/06/05 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers