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> <!-- Widgets code here --> </div> <div> <!-- 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> <div > <h2>Handle 1 [url=#] [/url] [url=#] [/url] </h2> <div > <!-- Panel Content Here --> </div> </div> </div> <div> <div > <h2>Handle 2 [url=#] [/url] [url=#] [/url] </h2> <div > <!-- 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