UNPKG

1.72 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 parent 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 cursor: pointer;
18 }
19
20 .parent {
21 background: #BFECFF;
22 border: 10px solid lightblue;
23 width: 500px;
24 height: 500px;
25 padding: 10px;
26 margin: 10px;
27 }
28 </style>
29 <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true"></script>
30
31 <script type="text/javascript">
32 require(["dojo/dnd/move", "dojo/domReady!"], function(move){
33 var m1, m2, m3, m4;
34 m1 = new move.parentConstrainedMoveable("moveable1", {area: "margin", within: true, delay: 20});
35 m2 = new move.parentConstrainedMoveable("moveable2", {area: "border", within: true});
36 m3 = new move.parentConstrainedMoveable("moveable3", {area: "padding", within: true});
37 m4 = new move.parentConstrainedMoveable("moveable4", {area: "content", within: true});
38 });
39 </script>
40</head>
41<body>
42 <h1>Dojo parent constraint test</h1>
43 <div class="parent" id="parent">
44 <div><strong>This is the parent element.</strong> All children will be restricted with <strong>within = true</strong>.</div>
45 <div class="moveable" id="moveable1">I am restricted within my parent's margins.</div>
46 <div class="moveable" id="moveable2">I am restricted within my parent's border.</div>
47 <div class="moveable" id="moveable3">I am restricted within my parent's paddings.</div>
48 <div class="moveable" id="moveable4">I am restricted within my parent's content.</div>
49 </div>
50</body>
51</html>