-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (116 loc) · 3.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="javascript/sprintcar.js"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.list').sprintcar({
connectWith: ".list",
update: function(event, data, ui) {
//alert("Updated order (serialized list follows): " + data);
}
});
$( "#droppable" ).droppable({
tolerance: "touch",
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
<style type="text/css" media="screen">
.list_header {
text-align: center;
color: #333333;
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
}
.list_container {
width: 885px;
height: 400px;
overflow: scroll;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background-color: #babec7;
position: relative; /* this is required for IE 8 to detect the container as a scrollParent() */
}
.ui-selected {
-webkit-transition: background-color .2s ease-in-out;
-moz-transition: background-color .2s ease-in-out;
-o-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
}
.ui-selectee {
border-radius: 5px;
background-color: #fcfcfc;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
.ui-selectee:hover {
background-color: #efefef;
cursor: pointer;
}
.ui-selectee.ui-selecting {
background-color: yellow;
}
.ui-selectee.ui-unselecting {
background-color: orange;
}
.ui-selectee.ui-selected {
background-color: #b5d5ff;
}
.ui-selectee.ui-selected:hover {
background-color: #a4ccfe;
}
.ui-selectee.ui-selectee-hidden {
visibility: hidden;
}
#droppable { width: 150px; height: 150px; padding: 0.5em; margin: 10px; background-color: orange; }
body {
font-family: Arial;
font-size: 12px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body id="index" onload="">
<div class="list_container">
<div class="list_header">Sod Backyard</div>
<div id="list1" class="list">
<div id='task_1'>Dig 4 inches deep</div>
<div id='task_2'>Put fresh soil with fertilizer</div>
<div id='task_3'>Soak the soil</div>
<div id='task_4'>Place sod appropriately over soil</div>
<div id='task_5'>Tamp the sod down</div>
</div>
<div class="list_header">House Maintenance</div>
<div id="list2" class="list">
<div id='task_6'>Clean out the garage and organize the tools</div>
<div id='task_8'>Mow the lawn</div>
<div id='task_9'>Paint the outside of the House</div>
<div id='task_10'>Take out the garbage</div>
<div id='task_11'>Wash the car</div>
</div>
<div class="list_header">Personal</div>
<div id="list3" class="list">
<div id='task_12'>Wash my truck</div>
<div id='task_13'>Shave head</div>
<div id='task_14'>Clean the house</div>
<div id='task_15'>Take out the garbage</div>
<div id='task_16'>Sweep the backyard patio.</div>
</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>