jquery实做拖拉层移动效果

jackyrong

jquery 和jquery ui搭配，可以实现象igoogle那样的拖拉拽的效果，下面以实例
讲解下。

首先要用到的类库是jquery和jquery ui了。
1 <div id="column1" class="column"><!-- Widgets code here --></div><div id="column2"  class="column"><!-- Widgets code here --></div>

  假设分为两列，要从列1拖拉到列2
2 再细化代码如下
  <div id="column1" class="column"><div class="dragbox" id="item1" ><h2>Handle 1      </h2><div class="dragbox-content" ><!-- Panel Content Here --></div></div></div><div id="column2"  class="column"><div class="dragbox" id="item2" ><h2>Handle 2      </h2><div class="dragbox-content" ><!-- Panel Content Here --></div></div></div>
   可以看到,每个DIV层中,都有两个按钮,分别是最大化和删除该层菜单的按钮.

3
现在轮到jquery 出场,代码如下:
$(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
  .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;}
  
运行效果参考:http://shivasoft.in/blog/wp-content/uploads/demos/DragAndDrop/index.html#