Drag Drop Panels - Web Developer Plus Demos <script type="text/javascript" src="js/jquery-1.3.2.js?1.1.20" >《script》<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js?1.1.20" >《script》<script type="text/javascript" >$(function(){ $('.dragbox') .each(function(){ $(this).hover(function(){ $(this).find('h2').addClass('collapse'); }, function(){ $(this).find('h2').removeClass('collapse'); }) .find('h2').hover(function(){ $(this).find('.configure').css('visibility', 'visible'); }, function(){ $(this).find('.configure').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.dragbox-content').toggle(); }) .end() .find('.configure').css('visibility', 'hidden'); }); $('.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()+'&'; }); alert('SortOrder: '+sortorder); /*Pass sortorder variable to server using ajax to save state*/ } }) .disableSelection();});《script》Drag n Drop Panels
Handle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. In massa mauris, varius sed tempus a, iaculis sed erat. Ut sollicitudin tellus mollis arcu laoreet semper. Suspendisse ut felis odio. Aliquam auctor, tortor sit amet suscipit elementum, nunc ante dictum lectus, ac accumsan justo nunc sed velit. Sed sollicitudin varius tortor vitae varius. Aliquam interdum, nisl consectetur laoreet commodo, metus massa sagittis nisl, non venenatis lacus mi nec tortor. Ut malesuada auctor dolor, id pulvinar est malesuada sed. Aliquam sed posuere orci.
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
