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
|
<!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 custom constraint test</title>
<style type="text/css">
@import "../../resources/dojo.css";
body {
padding: 1em;
}
.moveable {
background: #FFFFBF;
border: 1px solid black;
width: 300px;
padding: 10px 20px;
margin: 0px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript" src="../../dnd/move.js"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.move");
var STEP = 50;
var init = function(){
// 1st way
var m1 = new dojo.dnd.Moveable("moveable1");
m1.onMove = function(mover, leftTop){
leftTop.l -= leftTop.l % STEP;
leftTop.t -= leftTop.t % STEP;
dojo.marginBox(mover.node, leftTop);
};
// 2nd way
var m2 = new dojo.dnd.Moveable("moveable2");
dojo.connect(m2, "onMoving", function(mover, leftTop){
leftTop.l -= leftTop.l % STEP;
leftTop.t -= leftTop.t % STEP;
});
};
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1>Dojo custom constraint test</h1>
<p class="moveable" id="moveable1"><strong>This paragraph stops at 50x50 grid knots:</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="moveable2"><strong>This paragraph stops at 50x50 grid knots:</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>
</body>
</html>
|
