Bug Tracker

Ticket #1485: index.html

File index.html, 2.0 KB (added by torkild, 14 years ago)

The file(including styles) I have used in this case

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>Sortable List</title>
6<script type="text/javascript" src="js/jQuery.js"></script>
7<script src="js/interface.js" type="text/javascript"></script>
8<script type="text/javascript">
9$(document).ready( function(){
10        $('#modules').Sortable({
11                                                accept : 'sortable',
12                                                activeclass : 'sort-active',
13                                                opacity:        0.5
14                                                //ghosting: true,
15                                                //containment: 'parent',
16                                        });
17});
18</script>
19<style>
20
21* {
22        margin: 0;
23        padding: 0;
24}
25
26body {
27        font-size: 62.5%;
28}
29
30#modules {
31        width: 300px;
32        padding: 20px;
33        margin: 30px;
34        list-style: none;
35        float: left;
36}
37
38.sort-active {
39        background: #FFC;
40}
41
42#modules li ul {
43        list-style: none;
44}
45
46#modules li {
47        background: #666;
48        color: #FFF;
49        margin: 1px 0;
50        padding: 2px 8px;
51        font-family: Arial, Helvetica, sans-serif;
52}
53
54#modules .info, .sortable {
55        margin: -1px 0;
56        background: #333;
57        color: #FFC;
58        font-size: 1em;
59        font-family: Verdana, Arial, Helvetica, sans-serif;
60        font-weight: normal;
61        text-align: center;
62        padding: 2px;
63}
64
65#modules .info em {
66        font-style: normal;
67        text-decoration: underline;
68        color: #6CF;
69}
70
71#modules li, .active-sort {
72        background: #9C6;
73}
74
75#modules #not-installed ul li {
76        background: #F77;
77}
78
79</style>
80</head>
81
82<body>
83        <ul id="modules">
84                <li class="info">Draggables over here <em>are not</em> allowed!</li>
85               
86                <li class="sortable" id="en">Some draggable</li>
87                <li class="sortable" id="to">Another one...</li>
88                <li class="sortable" id="tre">More coming</li>
89                <li class="sortable" id="fire">Wow! That's many</li>
90                <li class="sortable" id="fem">Now it's getting lame</li>
91               
92                <li class="info">Draggables under here <em>are</em> allowed! But it's impossible to place any LI's just over this.</li>
93               
94                <li class="sortable" id="dakkar">This one is alone :(</li>
95        </ul>
96</body>
97</html>