ByRei - dynDiv


Simple dynamic Divs by Markus Bordihn

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
Red drop area

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;
}
     

Valid HTML 4.01 Strict