This example show a simple drop Limit, the blue DIV and red DIV is the drop Area. The two other DIV's can be only dropped into this Area.
In the default Mode, the DIV need to be with all corners in the drop Area, but there are also other drop Modes where only 1 corner need to be in the drop Area.
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
[Custom or additional CSS Code]
<div id="testdiv_1" class="dynDiv_moveDiv dynDiv_dropLimit"> Drop this DIV into the blue or red drop area.</div>
<div id="testdiv_2">
<div class="dynDiv_moveParentDiv dynDiv_dropLimit"> Drop Limit</div>
</div>
<div class="dynDiv_dropArea" style="width: 200px; height: 200px; border: 1px solid #000; background: #00f;"></div>
<div class="dynDiv_dropArea" style="width: 200px; height: 200px; border: 1px solid #000; background: #f00;"></div>
#testdiv_1 {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #aaa;
padding: 10px;
top: 200px;
left: 250px;
position: absolute;
}
#testdiv_2 {
width: 100px;
height: 100px;
right: 10px;
top: 160px;
border: 1px solid #aaa;
background: url('../example.jpg') no-repeat;
position: absolute;
}