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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dojo box constraint test</title>
<style type="text/css">
@import "../../resources/dojo.css";
@import "dndDefault.css";
body {
padding: 1em;
}
.moveable {
background: #FFFFBF;
border: 1px solid black;
width: 300px;
padding: 10px 20px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../dnd/move.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.move");
var m5, m6;
var init = function(){
m5 = new dojo.dnd.move.boxConstrainedMoveable("moveable5", {box: {l: 100, t: 100, w: 500, h: 500}});
m6 = new dojo.dnd.move.boxConstrainedMoveable("moveable6", {box: {l: 100, t: 100, w: 500, h: 500}, within: true});
// system-wide topics
dojo.subscribe("/dnd/move/start", function(node){
console.debug("Start move", node);
});
dojo.subscribe("/dnd/move/stop", function(node){
console.debug("Stop move", node);
});
// watching a particular moveable instance
dojo.connect(m5, "onDndMoveStart", function(mover){
console.debug("Start moving m5 with this mover:", mover);
});
dojo.connect(m5, "onDndMoveStop", function(mover){
console.debug("Stop moving m5 with this mover:", mover);
});
};
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1>Dojo box constraint test</h1>
<p class="moveable" id="moveable5"><strong>Paragraph restricted to (100,100:500,500) box:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.</p>
<p class="moveable" id="moveable6"><strong>Paragraph restricted to (100,100:500,500) box, it cannot go outside of this box:</strong> In hac habitasse platea dictumst. Etiam rhoncus, leo quis hendrerit vestibulum, ipsum felis porta massa, vitae posuere nunc lorem ac enim. Nam neque turpis, aliquet quis, sollicitudin sit amet, dapibus sed, eros. Duis volutpat porttitor velit. Vivamus nibh metus, iaculis eget, malesuada eget, facilisis id, lorem. Sed turpis. Vestibulum aliquam mauris. Integer malesuada tellus vel neque. In hac habitasse platea dictumst. Aliquam at lectus. Maecenas nonummy cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi imperdiet purus eu ipsum. Curabitur sapien felis, euismod eu, dapibus vel, tempor vitae, pede. Suspendisse blandit. Nulla imperdiet. Duis placerat nulla ultricies sem. In in mi nec ipsum molestie tempor. Sed scelerisque.</p>
<p class="moveable" dojoType="dojo.dnd.move.boxConstrainedMoveable" box="{l: 100, t: 100, w: 500, h: 500}"><strong>Marked up paragraph restricted to (100,100:500,500) box:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.
</p>
<p class="moveable" dojoType="dojo.dnd.Moveable"><strong>Marked up paragraph restricted to (100,100:500,500) box, it cannot go outside of this box:</strong> In hac habitasse platea dictumst. Etiam rhoncus, leo quis hendrerit vestibulum, ipsum felis porta massa, vitae posuere nunc lorem ac enim. Nam neque turpis, aliquet quis, sollicitudin sit amet, dapibus sed, eros. Duis volutpat porttitor velit. Vivamus nibh metus, iaculis eget, malesuada eget, facilisis id, lorem. Sed turpis. Vestibulum aliquam mauris. Integer malesuada tellus vel neque. In hac habitasse platea dictumst. Aliquam at lectus. Maecenas nonummy cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi imperdiet purus eu ipsum. Curabitur sapien felis, euismod eu, dapibus vel, tempor vitae, pede. Suspendisse blandit. Nulla imperdiet. Duis placerat nulla ultricies sem. In in mi nec ipsum molestie tempor. Sed scelerisque.
<!-- this is the obsolete way to do it -->
<script type="dojo/method">this.mover = dojo.dnd.boxConstrainedMover({l: 100, t: 100, w: 500, h: 500}, true);</script>
</p>
</body>
</html>
|
