This example have restricted drop Areas, so only the DIV with the blue border can be dropped into the blue area and the DIV with the red border can only be dropped into the red area.
You can choose the names free, but keep in mind the the name of the moveable DIV and the drop area need to be matched.
Example: dynDiv_dropLimit-[name] and dynDiv_dropArea-[name]
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_0.8.js"></script>
[Custom or additional CSS Code]
<div id="testdiv_1" class="dynDiv_moveDiv dynDiv_dropLimit-blue"> Blue drop area</div>
<div id="testdiv_2">
<div class="dynDiv_moveParentDiv dynDiv_dropLimit-red"> Red drop area</div>
</div>
<div class="dynDiv_dropArea-blue" style="width: 200px; height: 200px; border: 1px solid #000; background: #00f;"></div>
<div class="dynDiv_dropArea-red" style="width: 200px; height: 200px; border: 1px solid #000; background: #f00;"></div>
#testdiv_1 {
width: 100px;
height: 100px;
background: #ccc;
border: 5px solid #00f;
padding: 10px;
top: 200px;
left: 250px;
position: absolute;
}
#testdiv_2 {
width: 100px;
height: 100px;
right: 10px;
top: 160px;
border: 5px solid #f00;
background: url('../example.jpg') no-repeat;
position: absolute;
}