UNPKG

2.4 kBHTMLView Raw
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4 <title>Dojo custom constraint test</title>
5 <style type="text/css">
6 @import "../../resources/dojo.css";
7
8 body {
9 padding: 1em;
10 }
11
12 .moveable {
13 background: #FFFFBF;
14 border: 1px solid black;
15 width: 300px;
16 padding: 10px 20px;
17 margin: 0;
18 cursor: pointer;
19 }
20 </style>
21 <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true"></script>
22
23 <script type="text/javascript">
24 require(["dojo/aspect", "dojo/dom-geometry", "dojo/dnd/Moveable", "dojo/domReady!"], function(aspect, domGeom, Moveable){
25 var STEP = 50;
26
27 // 1st way
28 var m1 = new Moveable("moveable1");
29 m1.onMove = function(mover, leftTop){
30 leftTop.l -= leftTop.l % STEP;
31 leftTop.t -= leftTop.t % STEP;
32 domGeom.setMarginBox(mover.node, leftTop);
33 };
34 // 2nd way
35 var m2 = new Moveable("moveable2");
36 aspect.after(m2, "onMoving", function(mover, leftTop){
37 leftTop.l -= leftTop.l % STEP;
38 leftTop.t -= leftTop.t % STEP;
39 }, true);
40 });
41 </script>
42</head>
43<body>
44 <h1>Dojo custom constraint test</h1>
45 <div 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.</div>
46 <div 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.</div>
47</body>
48</html>