This is a simple Trash-can
Over the new API it is very easy to hide an object when it is dropped into the drop area.
HTML Code
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
[Custom CSS Code]
<div id="trash" class="dynDiv_dropArea-trash"></div>
<div id="bottle1" class="dynDiv_moveDiv dynDiv_dropLimit-trash dynDiv_dropMode-center"></div>
<div id="bottle2" class="dynDiv_moveDiv dynDiv_dropLimit-trash dynDiv_dropMode-center"></div>
<div id="bottle3" class="dynDiv_moveDiv dynDiv_dropLimit-trash dynDiv_dropMode-center"></div>
<div id="box1" class="dynDiv_moveDiv dynDiv_dropLimit-trash dynDiv_dropMode-center"></div>
<div id="box2" class="dynDiv_moveDiv dynDiv_dropLimit-trash dynDiv_dropMode-center"></div>
JavaScript Code
<script type="text/javascript">
if (typeof ByRei_dynDiv !== 'undefined') {
ByRei_dynDiv.api.drop = function () {
if (ByRei_dynDiv.db(8)) {
ByRei_dynDiv.api.obj.style.display='none';
}
};
}
</script>
Custom CSS Code
#trash {
width: 100px;
height: 100px;
background: url('trash-can.png');
}
#bottle1, #bottle2, #bottle3 {
width: 25px;
height: 100px;
background: url('bottle.png');
position: absolute;
top: 100px;
}
#bottle1 {
left: 210px;
}
#bottle2 {
left: 260px;
}
#bottle3 {
left: 310px;
}
#box1, #box2 {
width: 50px;
height: 50px;
background: url('box.png');
position: absolute;
top: 100px;
}
#box1 {
left: 360px;
}
#box2 {
left: 450px;
}