Luego, con la ultima version de mootools podrias hacer algo asi:
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jackson666" />
<title>Mootools FX - Drag and Drop</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var w = 200;
var h = 150;
var drag = new Drag.Move('draggable',{
droppables: '#drop',
onDrop: function(el, droppable){
if(droppable){
w += 60;
h += 10;
droppable.set('morph', {
transition: 'bounce:out',
duration: 1000
});
droppable.morph({ width : w, height : h });
$('draggable').morph({
'top' : 35,
'left' : 40
});
el.clone().cloneEvents(el).inject(droppable).morph('#draggable');
el.setStyles({
'margin' : '5px 0 0 30px',
'float' : 'left'
});
}
}
});
});
</script>
<style type="text/css">
#draggable{
width: 60px;
height: 50px;
background-color: black;
cursor: move;
position: relative;
z-index: 9998;
color: white;
padding: 10px;
}
#drop{
width: 650px;
height: 100px;
position: absolute;
top: 35px;
right: 40px;
background-color: #7fcfff;
color: white;
border: 2px solid #000000;
}
</style>
</head>
<body>
<div id="draggable">Drag me!</div>
<div id="drop">
<h3 align="center" style="margin: 0; padding: 0;">Drop here!</h3>
</div>
</body>
</html>