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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
JS中如何优雅的使用async await详解
Oct 05 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中截取中文字符串的代码小结
2011/07/17 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
javascript函数库-集合框架
2007/04/27 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Python创建模块及模块导入的方法
2015/05/27 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python装饰器用法实例总结
2018/05/26 Python
基于python实现简单日历
2018/07/28 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
北京导游词
2015/02/12 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技