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 相关文章推荐
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php 在线打包_支持子目录
2008/06/28 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
JQuery的$命名冲突详细解析
2013/12/28 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
简化vuex的状态管理方案的方法
2018/06/02 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
工程专业求职自荐书范文
2014/02/08 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技