mootools Drag.Move效果

!---->

Code
 !--<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script>-->
<style>
#containment {
    height: 210px;
    width: 330px;
    background: #eee;
    position: relative;
}
 
#dragger {
    height: 20px;
    width: 20px;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
}
 
div.dropper {
    margin-left: 10px;
    margin-top: 10px;
    float: left;
    height: 40px;
    width: 30px;
    background: #ff3300;
}
</style>

<div id="containment">
    <div id="dragger"><!-- --></div>
 
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
    <div class="dropper"><!-- --></div>
</div>
<script language="javascript"> 
var droppables = $$('div.dropper');
 
var container = $('containment');

new Drag.Move('dragger', {
    'container': container,
    'droppables': droppables,
    'onEnter': function(x,y){
    y.setStyle('background-color', '#000');
},
     'onLeave': function(x,y){
    y.setStyle('background-color', 'pink');
},
    'onDrop':function(x,y){
    y.setStyle('background-color', 'yellow');
}
});

</script> 

转载于:https://www.cnblogs.com/zjm1126qqcom/archive/2009/05/26/1490171.html