Drop Limit / Drop Mode Example
The default Option of Drop Areas need that the DIV is completly in the drop Area, with the help of Drop Options you can changed this behavior.
So when you used the Drop Mode, its only need that 1 corner reach the drop Area, the DIV will be automatic move in the drop Area completly.
Example: dynDiv_dropMode-fit or dynDiv_dropMode-center
dynDiv_dropMode-fit :
Blue drop area / DropMode: none
HTML Code
<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-blue dynDiv_dropMode-fit"> Blue drop area</div>
<div id="testdiv_2">
<div class="dynDiv_moveParentDiv dynDiv_dropLimit-red dynDiv_dropMode-center"> 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>
Additional CSS Code
#testdiv_1 {
width: 70px;
height: 70px;
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;
}
