Ticket #4221: separator.txt

File separator.txt, 1.4 KB (added by tehmeph, 11 years ago)

Example code

Line 
1<style>
2#drag_area {
3        min-height: 500px;
4        overflow: hidden;
5}
6
7.drag_column {
8        float: left;
9        width: 420px;
10        padding: 10px;
11        min-height: 500px;
12        border: 1px solid #fff;
13}
14#right_half_column {
15        margin-left: 10px;
16}
17.drag_widget {
18        background:#FFFFFF none repeat scroll 0 0;
19        border:1px dotted #003366;
20        font-family:Verdana,Arial,Helvetica,sans-serif;
21        margin-bottom:20px;
22        padding-bottom:10px;
23        width:100%;
24}
25
26#drag_area li {
27        list-style-type: none;
28}
29</style>
30
31<script>
32        $j(document).ready(function() {
33               
34                $j('#left_drag_area').sortable({
35                        connectWith: ['#right_drag_area']
36                });
37               
38                $j('#right_drag_area').sortable({
39                        connectWith: ['#left_drag_area']
40                });
41        });
42       
43        function alertstuff() {
44                var result = $j('#left_drag_area').sortable().('toArray');
45        }
46
47</script>
48<div class="thin" id="drag_area">
49        <div id="left_half_column" class="drag_column">
50               
51                <ul id="left_drag_area">
52                        <li id="one">
53                                <div class="drag_widget">
54                                        Test<br />
55                                        Drop<br />
56                                        Object<br />
57                                        One<br />
58                                </div>
59                        </li>
60               
61                        <li id="two">
62                                <div class="drag_widget">
63                                        Test<br />
64                                        Drop<br />
65                                        Object<br />
66                                        Two<br />
67                                </div>
68                        </li>
69                </ul>
70        </div>
71
72        <div id="right_half_column" class="drag_column">
73                <ul id="right_drag_area">
74                        <li id="three">
75                                <div class="drag_widget">
76                                        Test<br />
77                                        Drop<br />
78                                        Object<br />
79                                        Three<br />
80                                </div>
81                        </li>
82                        <li></li>
83                </ul>
84        </div>
85</div>