<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Drag Constrained to a Region</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Drag Constrained to a Region</h1>
<div class="exampleIntro">
<p>This example shows how to constrain a draggable Node to another Nodes region.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<style>
.dd-demo {
position: relative;
text-align: center;
color: #fff;
cursor: move;
height: 60px;
width: 60px;
padding: 0;
margin: 0;
}
.dd-demo div {
border: 1px solid black;
height: 58px;
width: 58px;
}
#dd-demo-canvas1 {
padding: 55px;
background-color: #004C6D;
border: 1px solid black;
}
#dd-demo-canvas2 {
padding: 25px;
background-color: #CDCDCD;
border: 1px solid black;
}
#dd-demo-canvas3 {
padding: 15px;
background-color: #8DD5E7;
border: 1px solid black;
}
#dd-demo-1 {
background-color: #8DD5E7;
top:5px;
left:5px;
color: #000;
}
#dd-demo-2 {
background-color: #CDCDCD;
top:50px;
left:100px;
color: #000;
}
#dd-demo-3 {
background-color: #004C6D;
top:-100px;
left:200px;
}
</style>
<div id="dd-demo-canvas1">
<div id="dd-demo-canvas2">
<div id="dd-demo-canvas3">
<div id="dd-demo-1" class="dd-demo"><div>1</div></div>
<div id="dd-demo-2" class="dd-demo"><div>2</div></div>
<div id="dd-demo-3" class="dd-demo"><div>3</div></div>
</div>
</div>
</div>
<script>
YUI({base:"../../build/", timeout: 10000}).use('dd-constrain', function(Y) {
var dd1 = new Y.DD.Drag({
node: '#dd-demo-1'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas3'
});
var dd2 = new Y.DD.Drag({
node: '#dd-demo-2'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas2'
});
var dd3 = new Y.DD.Drag({
node: '#dd-demo-3'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas1'
});
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>