jquery实做拖拉层移动效果
jquery实做拖拉层移动效果
jquery 和jquery ui搭配，可以实现象igoogle那样的拖拉拽的效果，下面以实例
讲解下。
首先要用到的类库是jquery和jquery ui了。
1
Java代码1.<div id="column1" class="column">
2.<!-- Widgets code here -->
3.</div>
4.
5.<div id="column2"class="column">
6.<!-- Widgets code here -->
7.</div>假设分为两列，要从列1拖拉到列2
2 再细化代码如下
Java代码1.<div id="column1" class="column">
2. <div class="dragbox" id="item1" >
3. <h2>Handle 1
4.
5.
6.
7. </h2>
8. <div class="dragbox-content" >
9. <!-- Panel Content Here -->
10. </div>
11. </div>
12.</div>
13.
14.<div id="column2"class="column">
15. <div class="dragbox" id="item2" >
16. <h2>Handle 2
17.
18.
19.
20. </h2>
21. <div class="dragbox-content" >
22. <!-- Panel Content Here -->
23. </div>
24. </div>
25.</div>可以看到,每个DIV层中,都有两个按钮,分别是最大化和删除该层菜单的按钮.
3
现在轮到jquery 出场,代码如下:
Java代码1.$(
2.function(){
3. $('a.maxmin').click(
4. function(){
5. $(this).parent().siblings('.dragbox-content').toggle();
6. });
7.
8. $('a.delete').click(
9. function(){
10. var sel = confirm('do you want to delete the widget?');
11. if(sel)
12. {
13. //del code here
14. }
15. }
16. );
17.
18. $('.column').sortable({
19. connectWith: '.column',
20. handle: 'h2',
21. cursor: 'move',
22. placeholder: 'placeholder',
23. forcePlaceholderSize: true,
24. opacity: 0.4,
25. stop: function(event, ui)
26. {
27. $(ui.item).find('h2').click();
28. var sortorder='';
29.
30. $('.column').each(function(){
31. var itemorder=$(this).sortable('toArray');
32. var columnId=$(this).attr('id');
33. sortorder+=columnId+'='+itemorder.toString()+'&';
34. });
35. sortorder = sortorder.substring(0, sortorder.length - 1)
36. alert('SortOrder: '+sortorder);
37.
38. }
39. }).disableSelection();
40.});下面解析下上面的代码:$('a.maxmin').click 和$('a.delete').click( 分别是用来处理最小化,最大化的情景,而a.delete则是处理删除的情况(这里没进行处理)
之后拖拉是通过jquery的sortable的可拖拉层来进行处理,具体的请参考jquery
手册,这里增加了一个处理,是在拖拉移动时,用alert的方法,显示出在第一列,第2列中,
当前的各列中div层的名称.
4 配套的CSS
Java代码1..column{
2. width:49%;
3. margin-right:.5%;
4. min-height:300px;
5. background:#fff;
6. float:left;
7.}
8..column .dragbox{
9. margin:5px 2px20px;
10. background:#fff;
11. position:"relative";
12. border:1px solid #946553;
13. -moz-border-radius:5px;
14. -webkit-border-radius:5px;
15.}
16..column .dragbox h2{
17. margin:0;
18. font-size:12px;
19. background:#946553;
20. color:#fff;
21. border-bottom:1px solid #946553;
22. font-family:Verdana;
23. cursor:move;
24. padding:5px;
25.}
26.
27..dragbox-content{
28. background:#fff;
29. min-height:100px; margin:5px;
30. font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
31.}
32..column.placeholder{
33. background: #EED5B7;
34. border:1px dashed #946553;
35.}
36.
37..opIcons
38.{
39.background-image: url('iconSpirite.gif')!important;
40.background-repeat: no-repeat;
41.float:right;
42.height:13px;
43.width:13px;
44.margin:0px 2px;
45.}
46.
47..maxmin
48.{
49. background-position:-26px 1px;
50.}
51.
52..delete
53.{
54. background-position:-269px center;
55. padding-top:1px;
56.}
运行效果参考:http://shivasoft.in/blog/wp-content/uploads/demos/DragAndDrop/index.html# 谢谢分享 这个不错。在WEB里的拖拉层移动效果一直是个难点。
谢谢分享:lol ;P
页:
[1]