mootools 拖拽变化效果

!---->

 

 

 

 

 

 

 !--<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script>-->
<style>
#draggables {
    height: 100px;
    position: relative;
}
 
#draggables div {
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    cursor: move;
    background: #c17878;
    position: absolute;
}
 
 
#droppables div {
    float: left;
    margin: 10px;
    width: 100px;
    height: 100px;
    background: #1d1d20;
}

 
</style>
<div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>
 
<div id="droppables">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>
 
<script language="javascript"> 

$$('#draggables div').each(function(drag){
    new Drag.Move(drag, {
    droppables: $$('#droppables div'),
    'onDrag':function(x,y){
    x.setStyle('background-color', '#faec8f');
},
     'onEnter': function(x,y){
    y.setStyle('background-color', '#78ba91');
},
     'onLeave': function(x,y){
    y.setStyle('background-color', '#1d1d20');
},
    'onDrop':function(x,y){
    x.dispose();
    y.set('morph',{transition:Fx.Transitions.Back.easeOut});
    y.morph({
                'height': y.getStyle('height').toInt() + 30,
                'background-color' : ['#78ba91', '#1d1d20']
            });
    
}
    });
})
</script>