首页 > PHP资讯 > HTML5培训技术 > jquery拖动层效果插件用法实例分析(附demo源码)_jquery

jquery拖动层效果插件用法实例分析(附demo源码)_jquery

HTML5培训技术
本文实例讲述了jquery拖动层效果插件用法。分享给大家供大家参考,具体如下:

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程序设计有所帮助。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持17不支持0