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

1、jquery拖动层效果插件用法实例分析(附demo源码)_ 这篇文章主要介绍了jquery拖动层效果插件用法,结合实例形式分析了jquery-ui-1.7.2.custom.min.js插件的具体用法技巧,并附带完整demo源码供读者下载参考,需要的伴侣可以参考下 本文实例讲解并描述了jquery拖动层效果插件用法。分享给大家供大家参考，具体如下： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l dir=ltr head profile=l;

2、 charset=UTF-8 / titleDrag Drop Panels - Web Developer Plus Demos/title script type=text/javascript src=js/jquery-1.3.2.js /script script type=text/javascript src=js/jquery-ui-1.7.2.custom.min.js /script link rel=stylesheet type=text/css href=styles.css / script type=text/javascript $(function() $(.

3、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(functio

4、n() $(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

5、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 /head body h3D

6、rag n Drop Panels/h3 div class=column id=column1 div class=dragbox id=item1 h2Handle 1/h2 div class=dragbox-content 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 sollicitud

7、in 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,

8、non venenatis lacus mi nec tortor. Ut malesuada auctor dolor, id pulvinar est malesuada sed. Aliquam sed posuere orci. /div /div div class=dragbox id=item2 h2span class=configure a href=# Configure/a/spanHandle 2/h2 div class=dragbox-content Phasellus porttitor adipiscing lacus ac tempus. Vivamus gr

9、avida augue metus, eu cursus nisl. Etiam arcu eros, placerat sed rhoncus at, porta et elit. Aenean pharetra ante neque. Aenean id egestas orci. Suspendisse potenti. Nunc at magna leo, sed porta erat. Proin eget neque turpis, vel blandit massa. Donec vel tortor magna. Curabitur id nibh magna, nec hen

10、drerit nibh. /div /div div class=dragbox id=item3 h2Handle 3/h2 div class=dragbox-content Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. Nam sed mauris vitae justo convallis placerat. Curabitur viverra, ipsum id volutpat sollicitudin, mi nisi c

11、ondimentum nulla, nec dapibus velit libero eget orci. Nam purus lectus, imperdiet pharetra pulvinar ac, sodales sit amet sem. Ut vel mollis ante. Vivamus consectetur varius risus eu hendrerit. Sed scelerisque euismod leo, quis accumsan justo venenatis eu. Ut risus lorem, aliquet id fermentum nec, au

12、ctor ut enim. Ut pretium elementum turpis vel dignissim. /div /div /div div class=column id=column2 div class=dragbox id=item4 h2Handle 4/h2 div class=dragbox-content Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper. Duis varius velit et dui auctor

13、 pretium bibendum urna gravida. Sed euismod dui in tellus euismod euismod. Nam convallis ornare fermentum. Aliquam libero augue, ullamcorper vitae lacinia at, vestibulum et risus. Praesent accumsan ultrices purus eu consequat. Phasellus posuere lobortis malesuada. Curabitur ac orci eu dui vulputate

14、porttitor. Sed a urna et odio vulputate euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In volutpat, tortor eu dapibus vestibulum, risus metus eleifend ipsum, quis lobortis elit dolor vel ligula. Aliquam ultrices nunc in elit bibendum pharetra. Ut non a

15、nte sagittis arcu imperdiet posuere. Duis consectetur massa sit amet enim scelerisque consequat et eget magna. Curabitur tristique molestie sem quis vulputate. Sed eleifend urna neque. Nam placerat eros non augue consequat vestibulum. /div /div div class=dragbox id=item5 h2Handle 5/h2 div class=drag

16、box-content Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna. Duis nec scelerisque orci. Nullam a enim est, et eleifend nunc. Proin dui eros, vulputate eget consectetur quis, ultrices ac sem. Nulla aliquam metus eu magna placerat placerat. Suspendisse eget tellus turpis, et ultricies nisi. Etiam in diam mi, sed tincidunt eros. Phasellus convall