jQuery实做拖拉层移动效果
jQuery实做拖拉层移动效果
jQuery 和jQuery ui搭配,可以实现象igoogle那样的拖拉拽的效果,下面以实例讲解下。
首先要用到的类库是jquery和jquery ui了。
1 Java代码
- <div id="column1" class="column">
- <!-- Widgets code here -->
- </div>
- <div id="column2" class="column">
- <!-- Widgets code here -->
- </div>
<div id="column1" class="column"> <!-- Widgets code here --> </div> <div id="column2" class="column"> <!-- Widgets code here --> </div>
假设分为两列,要从列1拖拉到列2
2 再细化代码如下
Java代码
- <div id="column1" class="column">
- <div class="dragbox" id="item1" >
- <h2>Handle 1
- [url=#] [/url]
- [url=#] [/url]
- </h2>
- <div class="dragbox-content" >
- <!-- Panel Content Here -->
- </div>
- </div>
- </div>
- <div id="column2" class="column">
- <div class="dragbox" id="item2" >
- <h2>Handle 2
- [url=#] [/url]
- [url=#] [/url]
- </h2>
- <div class="dragbox-content" >
- <!-- Panel Content Here -->
- </div>
- </div>
- </div>
<div id="column1" class="column"> <div class="dragbox" id="item1" > <h2>Handle 1 [url=#] [/url] [url=#] [/url] </h2> <div class="dragbox-content" > <!-- Panel Content Here --> </div> </div> </div> <div id="column2" class="column"> <div class="dragbox" id="item2" > <h2>Handle 2 [url=#] [/url] [url=#] [/url] </h2> <div class="dragbox-content" > <!-- Panel Content Here --> </div> </div> </div>
可以看到,每个DIV层中,都有两个按钮,分别是最大化和删除该层菜单的按钮.
3
现在轮到jquery 出场,代码如下:
Java代码
- $(
- function(){
- $('a.maxmin').click(
- function(){
- $(this).parent().siblings('.dragbox-content').toggle();
- });
- $('a.delete').click(
- function(){
- var sel = confirm('do you want to delete the widget?');
- if(sel)
- {
- //del code here
- }
- }
- );
- $('.column').sortable({
- connectWith: '.column',
- handle: 'h2',
- cursor: 'move',
- placeholder: 'placeholder',
- forcePlaceholderSize: true,
- opacity: 0.4,
- stop: function(event, ui)
- {
- $(ui.item).find('h2').click();
- var sortorder='';
- $('.column').each(function(){
- var itemorder=$(this).sortable('toArray');
- var columnId=$(this).attr('id');
- sortorder+=columnId+'='+itemorder.toString()+'&';
- });
- sortorder = sortorder.substring(0, sortorder.length - 1)
- alert('SortOrder: '+sortorder);
- }
- }).disableSelection();
- });
$( function(){ $('a.maxmin').click( function(){ $(this).parent().siblings('.dragbox-content').toggle(); }); $('a.delete').click( function(){ var sel = confirm('do you want to delete the widget?'); if(sel) { //del code here } } ); $('.column').sortable({ connectWith: '.column', handle: 'h2', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, stop: function(event, ui) { $(ui.item).find('h2').click(); var sortorder=''; $('.column').each(function(){ var itemorder=$(this).sortable('toArray'); var columnId=$(this).attr('id'); sortorder+=columnId+'='+itemorder.toString()+'&'; }); sortorder = sortorder.substring(0, sortorder.length - 1) alert('SortOrder: '+sortorder); } }).disableSelection(); });
下面解析下上面的代码:
$('a.maxmin').click 和$('a.delete').click(
分别是用来处理最小化,最大化的情景,而a.delete则是处理删除的情况(这里没进行处理)
之后拖拉是通过jquery的sortable的可拖拉层来进行处理,具体的请参考jquery
手册,这里增加了一个处理,是在拖拉移动时,用alert的方法,显示出在第一列,第2列中,
当前的各列中div层的名称.
4 配套的CSS
Java代码
- .column{
- width:49%;
- margin-right:.5%;
- min-height:300px;
- background:#fff;
- float:left;
- }
- .column .dragbox{
- margin:5px 2px 20px;
- background:#fff;
- position:"relative";
- border:1px solid #946553;
- -moz-border-radius:5px;
- -webkit-border-radius:5px;
- }
- .column .dragbox h2{
- margin:0;
- font-size:12px;
- background:#946553;
- color:#fff;
- border-bottom:1px solid #946553;
- font-family:Verdana;
- cursor:move;
- padding:5px;
- }
- .dragbox-content{
- background:#fff;
- min-height:100px; margin:5px;
- font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
- }
- .column .placeholder{
- background: #EED5B7;
- border:1px dashed #946553;
- }
- .opIcons
- {
- background-image: url('iconSpirite.gif')!important;
- background-repeat: no-repeat;
- float:right;
- height:13px;
- width:13px;
- margin:0px 2px;
- }
- .maxmin
- {
- background-position:-26px 1px;
- }
- .delete
- {
- background-position:-269px center;
- padding-top:1px;
- }
评论暂时关闭