-
Notifications
You must be signed in to change notification settings - Fork 0
/
recon.html
72 lines (63 loc) · 1.81 KB
/
recon.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
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.1");
</script>
<style type="text/css">
#available { }
#shield { width: 150px; }
#program { width: 150px; min-height: 50px; background: #eeeeff; }
.commands ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.commands li { margin: 5px; padding: 5px; width: 150px; border: 1px solid; }
</style>
<script type="text/javascript">
$(function() {
$("#shield").droppable({
// accept: '#available li',
greedy: true,
deactivate: function(event, ui) {
if (!event.originalEvent.shielded) {
ui.draggable.remove();
}
},
drop: function(event, ui) {
event.originalEvent['shielded'] = true;
}
});
// $("#full_page").droppable({
// deactivate: function(event, ui) { console.debug("deactivate outer", event, ui); },
// drop: function(event, ui) { console.debug("drop outer", event, ui); }
// });
$("#program").sortable({
cursor: 'move',
revert: true,
remove: function(event, ui) { console.debug("remove", event, ui); }
});
$("#available li").draggable({
connectToSortable: "#program",
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
$("ul, li").disableSelection();
});
</script>
</head>
<body id="full_page" >
<div class="commands">
<div>
Available Robot Commands
<ul id="available">
<li class="forward">Forward</li>
<li class="rotate_left">Rotate Left</li>
<li class="rotate_right">Rotate Right</li>
</ul>
</div>
<div id="shield">
Recon program
<ul id="program">
</ul>
</div>
</div><!-- End commands -->
</body>