vorrei che i due elementi con testo e1 e e2 non escano al di fuori del div con id="area" ed inoltre scrivere sul div con id="test" la posizione dell'elemento spostato.

<html>
<head>
<title>drag and drop</title>
<link rel="stylesheet" type="text/css" href="stile.css" />
<script type="text/javascript" src="../../prototype.js"></script>
<script type="text/javascript" src="libScriptaculous/effects.js"></script>
<script type="text/javascript" src="libScriptaculous/dragdrop.js"></script>
<script type="text/javascript">
document.observe('dom:loaded',function(){
$('element1').insideCell=function(){
var pos=this.positionedOffset();
return ([(pos.left / 70).floor(), (pos.top / 30).floor()]).all(function(value){
$R(0,1).include(value);
});
};
new Draggable('element1',{revert:!($('element1').insid eCell.bind($('element1')))});
new Draggable('element2');
//Droppables.add('area',{accept:'element'});
});
</script>
</head>
<body>
<div id="box">
<div id="area">
<span id="element1" class="element">e1</span>
<span id="element2" class="element">e2</span>
<span id="cell1" class="cell" style='background:yellow'>
</span>
<span id="cell2" class="cell" style='background:grey'>
</span>
<span id="cell3" class="cell" style='background:grey'>
</span>
<span id="cell4" class="cell" style='background:yellow'>
</span>
</div>
</div>
<div id="test">
</div>
</body>
</html>
ecco il contenuto del file css
.element{
position:absolute;
left:30;
top:20;
width:20px;
border:1px dotted blue;
}
#area{
width:140px;
height:60px;
border:5px solid red;
}
.cell{
width:70px;
height:30px;
float:left
}
ho notato che la funzione di controllo della posizione non viene mai chiamata.
ringrazio in anticipo per l'aiuto.