root/mochikit/branches/scriptaculous/examples/dnd_sortable/sortable4_test.html

Revision 633, 3.0 kB (checked in by therve@gmail.com, 3 years ago)

Upgrade Sortable

Line 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5   <title>script.aculo.us sortable functional test file</title>
6   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7         <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
8         <script type="text/javascript" src="../../MochiKit/New.js"></script>
9         <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
10         <script type="text/javascript" src="../../MochiKit/Signal.js"></script>
11         <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
12         <script type="text/javascript" src="../../MochiKit/Sortable.js"></script>
13   <style type="text/css" media="screen">
14   ul.sortablelist {
15     list-style-image:none;
16     list-style-type:none;
17     margin-top:5px;
18     margin:0px;
19     padding:0px;
20   }
21
22   ul.sortabledemo li {
23     padding:0px;
24     margin:0px;
25   }
26
27   span.handle {
28     background-color: #E8A400;
29     color:white;
30     cursor: move;
31   }
32
33   li.green {
34     background-color: #ECF3E1;
35     border:1px solid #C5DEA1;
36     cursor: move;
37   }
38
39   li.orange {
40     border:1px solid #E8A400;
41     background-color: #FFF4D8;
42   }
43   </style>
44 </head>
45 <body>
46 <h1>script.aculo.us: Two floating sortables with containment and dropOnEmpty</h1>
47
48 <div style="height:200px;">
49 <div style="float:left;">
50 <h3>This is the first list</h3>
51  <ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;">
52    <li class="green" id="firstlist_firstlist1">Item 1 from first list.</li>
53    <li class="green" id="firstlist_firstlist2">Item 2 from first list.</li>
54    <li class="green" id="firstlist_firstlist3">Item 3 from first list.</li>
55  </ul>
56 </div>
57  <div style="float:left;">
58  <h3>And now the second list</h3>
59  <ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;">
60    <li class="orange" id="secondlist_secondlist1">
61      <span class="handle">DRAG HERE</span> Item 1 from second list.
62    </li>
63    <li class="orange" id="secondlist_secondlist2">
64      <span class="handle">DRAG HERE</span> Item 2 from second list.
65    </li>
66    <li class="orange" id="secondlist_secondlist3">
67      <span class="handle">DRAG HERE</span> Item 3 from second list.
68    </li>
69  </ul>
70 </div>
71 </div>
72
73 <hr style="clear:both" />
74
75 <pre id="firstlist_debug"></pre>
76 <pre id="secondlist_debug"></pre>
77
78  <script type="text/javascript">
79  // <![CDATA[
80    MochiKit.Sortable.Sortable.create("firstlist",
81      {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false,
82       onChange:function(){$('firstlist_debug').innerHTML = MochiKit.Sortable.Sortable.serialize('firstlist') }});
83    MochiKit.Sortable.Sortable.create("secondlist",
84      {dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false,
85      onChange:function(){$('secondlist_debug').innerHTML = MochiKit.Sortable.Sortable.serialize('secondlist') }});
86  // ]]>
87  </script>
88  
89  </body>
90  </html>
Note: See TracBrowser for help on using the browser.