Bug Tracker

Ticket #1767: drag2.html

File drag2.html, 2.4 KB (added by metinex, 15 years ago)

The HTML that uses http://interface.eyecon.ro/demos/sort.html

Line 
1<style>
2
3
4
5
6
7
8.groupWrapper
9{
10        width: 32%;
11        float: left;
12        margin-right: 1%;
13        //height: 200px;       
14}
15.serializer
16{
17        clear: both;
18}
19.groupItem
20{
21        margin-bottom: 20px;
22}
23.groupItem .itemHeader
24{
25        line-height: 28px;
26        background-color: #DAFF9F;
27        border-top: 2px solid #B5EF59;
28        color: #000;
29        padding: 0 10px;
30        cursor: move;
31        font-weight: bold;
32        font-size: 16px;
33        height: 28px;
34        position: relative;
35}
36
37.groupItem .itemHeader a
38{
39        position: absolute;
40        right: 10px;
41        top: 0px;
42        font-weight: normal;
43        font-size: 11px;
44        text-decoration: none;
45}
46.sortHelper
47{
48        border: 3px dashed #666;
49        width: auto !important;
50}
51.groupWrapper p
52{
53        height: 1px;
54        overflow: hidden;
55        margin: 0;
56        padding: 0;
57}
58
59#sort2{
60        border:1px solid #eeeeee
61}
62
63</style>
64<script type="text/javascript" src="jquery-1.2.1.js"></script>
65<script type="text/javascript" src="interface.js"></script>
66<DIV class=groupWrapper id=sort1>
67<DIV class=groupItem id="s3">
68<DIV class=itemHeader style="moz-user-select: none">SAT 25th
69Percentile</DIV></DIV>
70<DIV class=groupItem id="s4">
71<DIV class=itemHeader style="moz-user-select: none">SAT 75th
72Percentile</DIV></DIV>
73<DIV class=groupItem id="s5">
74<DIV class=itemHeader style="moz-user-select: none">Students in Top 10% of their
75High School Class</DIV></DIV>
76<DIV class=groupItem id="s6">
77<DIV class=itemHeader style="moz-user-select: none">Acceptance Rate</DIV></DIV>
78
79</DIV>
80<DIV class=groupWrapper id="sort2">
81<DIV class=groupItem id="0">
82<!--DIV class=itemHeader style="moz-user-select: none">Drag &amp; Drop
83here</DIV></DIV-->
84<P>&nbsp;</P></DIV>
85
86</STYLE>
87
88<SCRIPT>
89save_criteria = function() 
90{
91
92}
93
94$(document).ready(
95    function () {
96
97                $('div.groupWrapper').Sortable(
98                        {
99                                accept: 'groupItem',
100                                helperclass: 'sortHelper',
101                                activeclass :   'sortableactive',
102                                hoverclass :    'sortablehover',
103                                handle: 'div.itemHeader',
104                                tolerance: 'pointer',
105                                onChange : function(ser)
106                                {
107                                        if(document.getElementById('0'))document.getElementById('s0').style.display='none';
108                                        save_criteria();
109                                        },
110                                        onStart : function()
111                                        {
112                                                $.iAutoscroller.start(this, document.getElementsByTagName('body'));
113                                        },
114                                        onStop : function()
115                                        {
116                                                $.iAutoscroller.stop();
117                                        }
118                        }
119                );
120    }
121);
122
123
124
125function serialize(s)
126{
127        serial = $.SortSerialize(s);
128        alert(serial.hash);
129};
130</SCRIPT>
131