jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包


Posted in Javascript onApril 06, 2011

ligerDrag()
使目标对象可以拖动。
参数

handler

拖动的作用区域,在这个区域才可以触发拖动。可以是字符串(jQuery selector),也可以是一个Dom jQuery对象

onStartDrag

开始拖动事件

onDrag

拖动事件

onStopDrag

结束拖动事件
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
示例一:默认模式

<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () 
{ 
$('#rr1,#rr3,#rr2').ligerDrag(); 
}); 
</script>

<div id="rr1" style="width:200px;height:200px;top:230px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"> </div> 
<div id="rr2" style="width:140px;height:300px;top:40px; left:350px; background:#AFCCF1; z-index:2;position:absolute;"> </div> 
<div id="rr3" style="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;"> </div>

示例二:只能在Panel头部进行拖动
<div id="rr1" style="width:200px;height:200px;top:130px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"> 
<div class="header" style="height:30px; line-height:30px; background:#A1D1D1">标题</div> 
</div>

$(function () 
{ 
$('#rr1').ligerDrag({ handler: '.header' }); 
});

示例三:设置onStartDrag事件,使当前对象位于最顶层
function changeZIndex(obj) 
{ 
$(obj).css("z-index", 2).siblings("div").css("z-index", 1); 
} 
$(function () 
{ 
$('#rr1,#rr3,#rr2').ligerDrag({ 
onStartDrag: function (current) 
{ 
changeZIndex(current.target[0]); 
} 
}); 
});

示例四:使拖动时对象半透明
.l-dragging{filter:alpha(opacity=50);opacity:0.50; }

$('#rr1,#rr3,#rr2').ligerDrag({ 
onStartDrag: function (current) 
{ 
current.target.addClass("l-dragging"); 
}, 
onStopDrag: function (current) 
{ 
current.target.removeClass("l-dragging"); 
} 
});

示例五:显示拖动时的信息
<div id="message"></div>

$('#rr1,#rr3,#rr2').ligerDrag({ 
onDrag: function (current) 
{ 
$("#message").html( 
"对象:" + current.target.attr("id") + 
"<BR>X移动:" + current.diffX + 
"<BR>Y移动:" + current.diffY); 
}, 
onStopDrag: function (current) 
{ 
$("#message").html(""); 
} 
});

ligerResizable()
使目标对象可以调整大小。
参数

handles

调整大小的作用区域,在这个区域才可以触发调整大小。字符串。包括n , e, s, w, ne, se, sw, nw这八个方向,可自由选择一个或多个,多个时用逗号隔开

onStartResize

开始调整大小事件

onResize

调整大小事件

onStopResize

结束调整大小事件
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
示例一:默认,不使用任何参数,这时handles='n , e, s, w, ne, se, sw, nw'

<div id="rr1" style="width:200px;height:200px;top:230px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"> </div> <div id="rr2" style="width:140px;height:300px;top:40px; left:350px; background:#AFCCF1; z-index:2;position:absolute;"> </div> <div id="rr3" style="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;">

<link href="lib/ligerUI/ligerui-resizable.css" rel="stylesheet" type="text/css" /> 
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function (){ 
$('#rr1,#rr2,#rr3').ligerResizable(); 
}); 
</script>

示例二:只能在右下角才能调整大小
$('#rr1').ligerResizable({ handles: 'se' });

示例二:设置onStartResize、onResize、onStopResize事件
$('#rr1').ligerResizable({ 
onStartResize: function (current, e) 
{ 
$("#message").html("start"); 
}, 
onResize: function (current, e) 
{ 
$("#message").html( 
"方向:" + current.dir + 
"<BR>width:" + current.newWidth + 
"<BR>height:" + current.newHeight); 
}, 
onStopResize: function (current, e) 
{ 
$("#message").html("stop"); 
} 
});

最后附上Demo下载: 下载地址
更多细节可以访问: http://demo.3water.com/js/2011/ligerUI/drag01.html
Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 #Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 #Javascript
Jquery判断IE6等浏览器的代码
Apr 05 #Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 #Javascript
JQuery中$之选择器用法介绍
Apr 05 #Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 #Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 #Javascript
You might like
php adodb分页实现代码
2009/03/19 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
pyqt5中动画的使用详解
2020/04/01 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
房屋所有权证明
2015/06/19 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
asyncio异步编程之Task对象详解
2022/03/13 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
nginx 添加http_stub_status_module模块
2022/05/25 Servers
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs