-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest13.html
76 lines (70 loc) · 2.27 KB
/
test13.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
#textbox
{
border: 1px solid;
width: 200px;
height: 200px;
overflow: auto;
}
#palette
{
margin: 10px;
border: 1px solid;
width: 200px;
height: 200px;
}
#playground
{
border: 1px solid;
width: 200px;
height: 200px;
overflow: auto;
}
.node
{
display: inline;
border: 1px solid;
width: 50px;
height: 50px;
}
.opt
{
border: 1px solid;
width: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
</head>
<body>
<div id='container'>
<div id='textbox'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus pulvinar euismod. Phasellus porta diam non purus tincidunt congue. Nullam dolor sem, pretium quis sem sed, dictum viverra turpis. Pellentesque volutpat est ut pharetra dignissim. Cras euismod non mauris nec rhoncus. Ut urna sapien, aliquet at urna vel, rhoncus ultrices diam. In ornare, ligula eget luctus lobortis, orci tortor faucibus lectus, a gravida neque urna at diam. Suspendisse potenti. Maecenas euismod tristique ipsum sed rutrum.
</div>
<div id='playground'>
</div>
</div>
<div id='sandbox'>
<div id='box'>Drag Me</div>
</div>
<div id='palette'>
<ul id='list'>
<div class='opt'>a</div>
<div class='opt'>b</div>
<div class='opt'>c</div>
</ul>
</div>
<script>
$("#container").droppable();
$("#playground").droppable();
$("#box").draggable();
$(".opt").each(function(index){
$(this).draggable();
});
</script>
</body>
</html>