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 相关文章推荐
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
微信小程序异步处理详解
Nov 10 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
layer弹出层取消遮罩的方法
Sep 25 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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php阳历转农历优化版
2016/08/08 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
python flask中静态文件的管理方法
2018/03/20 Python
python的debug实用工具 pdb详解
2019/07/12 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
大学生入党思想汇报
2014/01/14 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
校园环保标语
2014/06/13 职场文书
爱护草坪标语
2014/06/24 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
团队会宣传标语
2014/10/09 职场文书